From 14a447c9be2175f755e2fd45408ee95caf3bd6b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Sch=C3=B6dl?= <jakob.schoedl@tum.de>
Date: Sun, 15 Dec 2024 02:37:19 +0100
Subject: [PATCH] feat: add country select suspense & skeleton

---
 .../ComparisonPortal/CountryComparison.tsx    | 20 +++++++++++--------
 .../CountrySelectSkeleton.tsx                 | 18 +++++++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ComparisonPortal/CountrySelectSkeleton.tsx

diff --git a/src/components/ComparisonPortal/CountryComparison.tsx b/src/components/ComparisonPortal/CountryComparison.tsx
index dd6b3bad..061c4f8e 100644
--- 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
new file mode 100644
index 00000000..994ba788
--- /dev/null
+++ 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;