feat: add country select suspense & skeleton

jst-seminar-rostlab-tum · Dec 15, 2024 · 14a447c · 14a447c
1 parent 6191021
commit 14a447c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/src/components/ComparisonPortal/CountryComparison.tsx b/src/components/ComparisonPortal/CountryComparison.tsx
@@ -3,6 +3,7 @@
 import { Suspense, useState } from 'react';
 
 import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
+import CountrySelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
 import { GlobalFcsData } from '@/domain/entities/country/CountryFcsData';
 import { CountryMapData, CountryMapDataWrapper } from '@/domain/entities/country/CountryMapData';
 
@@ -19,14 +20,17 @@ export default function CountryComparison({ countryMapData, globalFcsData }: Cou
 
   return (
     <div>
-      <CountrySelection
-        countryMapData={countryMapData}
-        globalFcsData={globalFcsData}
-        selectedCountries={selectedCountries}
-        setSelectedCountries={setSelectedCountries}
-      />
-      <Suspense fallback={<ComparisonAccordionSkeleton />} />
-      <CountryComparisonAccordion selectedCountries={selectedCountries} />
+      <Suspense fallback={<CountrySelectionSkeleton />}>
+        <CountrySelection
+          countryMapData={countryMapData}
+          globalFcsData={globalFcsData}
+          selectedCountries={selectedCountries}
+          setSelectedCountries={setSelectedCountries}
+        />
+      </Suspense>
+      <Suspense fallback={<ComparisonAccordionSkeleton />}>
+        <CountryComparisonAccordion selectedCountries={selectedCountries} />
+      </Suspense>
     </div>
   );
 }
diff --git a/src/components/ComparisonPortal/CountrySelectSkeleton.tsx b/src/components/ComparisonPortal/CountrySelectSkeleton.tsx
@@ -0,0 +1,18 @@
+import { Skeleton } from '@nextui-org/skeleton';
+import React from 'react';
+
+function CountrySelectionSkeleton() {
+  return (
+    <div className="pb-4 space-y-6">
+      <div className="group flex flex-col w-full">
+        <div className="w-full flex flex-col">
+          <Skeleton className="relative px-3 gap-3 w-full shadow-sm h-10 min-h-10 rounded-medium">
+            <div className="inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border" />
+          </Skeleton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CountrySelectionSkeleton;