server side events and ui improvemnt

apps/web/src/components/overview/overview-top-geo.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { Suspense } from 'react';
 import { Chart } from '@/components/report/chart';
+import { ChartLoading } from '@/components/report/chart/ChartLoading';
 import { cn } from '@/utils/cn';
 
 import { Widget, WidgetBody } from '../Widget';
@@ -144,26 +146,28 @@ export default function OverviewTopGeo() {
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <Chart
-            hideID
-            {...widget.chart}
-            previous={false}
-            onClick={(item) => {
-              switch (widget.key) {
-                case 'countries':
-                  setWidget('regions');
-                  setCountry(item.name);
-                  break;
-                case 'regions':
-                  setWidget('cities');
-                  setRegion(item.name);
-                  break;
-                case 'cities':
-                  setCity(item.name);
-                  break;
-              }
-            }}
-          />
+          <Suspense fallback={<ChartLoading />}>
+            <Chart
+              hideID
+              {...widget.chart}
+              previous={false}
+              onClick={(item) => {
+                switch (widget.key) {
+                  case 'countries':
+                    setWidget('regions');
+                    setCountry(item.name);
+                    break;
+                  case 'regions':
+                    setWidget('cities');
+                    setRegion(item.name);
+                    break;
+                  case 'cities':
+                    setCity(item.name);
+                    break;
+                }
+              }}
+            />
+          </Suspense>
         </WidgetBody>
       </Widget>
     </>