feat: Skeleton for Country Insights in Country View on mobile (#147)

jst-seminar-rostlab-tum · Dec 19, 2024 · d3194d6 · d3194d6
1 parent dd4f9d9
commit d3194d6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 20 deletions.
diff --git a/src/components/Accordions/AccordionModalSkeleton.tsx b/src/components/Accordions/AccordionModalSkeleton.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@nextui-org/skeleton';
+
+export default function AccordionModalSkeleton() {
+  return (
+    <div className="absolute bottom-10 right-28 z-9999">
+      {/* For screens smaller than 450px */}
+      <div className="block sm450:hidden sm700:hidden">
+        <Skeleton className="rounded-full w-[40px] h-[40px] bg-content1 dark:bg-content1" />
+      </div>
+
+      {/* For screens between 450px and 700px */}
+      <div className="hidden sm450:block sm700:hidden">
+        <Skeleton className="rounded-xl w-[112px] h-[40px] bg-content1 dark:bg-content1" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Map/FcsChoropleth.tsx b/src/components/Map/FcsChoropleth.tsx
@@ -11,6 +11,7 @@ import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps';
 import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations';
 import { MapOperations } from '@/operations/map/MapOperations';
 
+import AccordionModalSkeleton from '../Accordions/AccordionModalSkeleton';
 import CountryLoadingLayer from './CountryLoading';
 import FscCountryChoropleth from './FcsCountryChoropleth';
 
@@ -65,11 +66,14 @@ export default function FcsChoropleth({
       )}
       {/* Animated GeoJSON layer for the selected country */}
       {selectedCountryId && (!regionData || !regionLabelData) && (
-        <CountryLoadingLayer
-          data={data}
-          selectedCountryId={selectedCountryId}
-          color="hsl(var(--nextui-fcsAnimation))"
-        />
+        <>
+          <CountryLoadingLayer
+            data={data}
+            selectedCountryId={selectedCountryId}
+            color="hsl(var(--nextui-fcsAnimation))"
+          />
+          <AccordionModalSkeleton />
+        </>
       )}
       {regionData && countryId === selectedCountryId && regionLabelData && (
         <FscCountryChoropleth

diff --git a/src/components/Map/IpcMap/IpcChoropleth.tsx b/src/components/Map/IpcMap/IpcChoropleth.tsx
@@ -1,6 +1,7 @@
 import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
 import React from 'react';
 
+import AccordionModalSkeleton from '@/components/Accordions/AccordionModalSkeleton';
 import CountryLoadingLayer from '@/components/Map/CountryLoading';
 import { useSelectedCountryId } from '@/domain/contexts/SelectedCountryIdContext';
 import { useIpcQuery } from '@/domain/hooks/globalHooks';
@@ -24,16 +25,19 @@ function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryN
         />
       )}
       {!ipcRegionData && selectedCountryId && (
-        <CountryLoadingLayer
-          data={
-            {
-              type: 'FeatureCollection',
-              features: countries.features.filter((feature) => feature?.properties?.adm0_id === selectedCountryId),
-            } as FeatureCollection<Geometry, GeoJsonProperties>
-          }
-          selectedCountryId={selectedCountryId}
-          color="hsl(var(--nextui-ipcAnimation))"
-        />
+        <>
+          <CountryLoadingLayer
+            data={
+              {
+                type: 'FeatureCollection',
+                features: countries.features.filter((feature) => feature?.properties?.adm0_id === selectedCountryId),
+              } as FeatureCollection<Geometry, GeoJsonProperties>
+            }
+            selectedCountryId={selectedCountryId}
+            color="hsl(var(--nextui-ipcAnimation))"
+          />
+          <AccordionModalSkeleton />
+        </>
       )}
 
       {ipcRegionData && (

diff --git a/src/components/Map/NutritionChoropleth.tsx b/src/components/Map/NutritionChoropleth.tsx
@@ -12,6 +12,7 @@ import NutritionChoroplethProps from '@/domain/props/NutritionChoroplethProps';
 import { MapOperations } from '@/operations/map/MapOperations';
 import NutritionChoroplethOperations from '@/operations/map/NutritionChoroplethOperations';
 
+import AccordionModalSkeleton from '../Accordions/AccordionModalSkeleton';
 import CountryLoadingLayer from './CountryLoading';
 import NutritionStateChoropleth from './NutritionStateChoropleth';
 
@@ -69,11 +70,14 @@ export default function NutritionChoropleth({
       )}
       {/* Animated GeoJSON layer for the selected country */}
       {selectedCountryId && (!regionNutritionData || !regionLabelData) && (
-        <CountryLoadingLayer
-          data={data}
-          selectedCountryId={selectedCountryId}
-          color="hsl(var(--nextui-nutritionAnimation))"
-        />
+        <>
+          <CountryLoadingLayer
+            data={data}
+            selectedCountryId={selectedCountryId}
+            color="hsl(var(--nextui-nutritionAnimation))"
+          />
+          <AccordionModalSkeleton />
+        </>
       )}
       {
         // if this country ('countryId') is selected and data is loaded ('regionNutritionData') show Choropleth for all states

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -64,6 +64,7 @@ const config = {
       },
       screens: {
         sm700: '700px',
+        sm450: '450px',
       },
       width: {
         '215px': '215px',