From d3194d6c81aa09329fb7284ebfd3d297f4033d2a Mon Sep 17 00:00:00 2001
From: Ahmed Farouk <93868173+ahmedfarouk2000@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:47:56 +0100
Subject: [PATCH] feat: Skeleton for Country Insights in Country View on mobile
 (#147)

---
 .../Accordions/AccordionModalSkeleton.tsx     | 17 +++++++++++++
 src/components/Map/FcsChoropleth.tsx          | 14 +++++++----
 src/components/Map/IpcMap/IpcChoropleth.tsx   | 24 +++++++++++--------
 src/components/Map/NutritionChoropleth.tsx    | 14 +++++++----
 tailwind.config.js                            |  1 +
 5 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Accordions/AccordionModalSkeleton.tsx

diff --git a/src/components/Accordions/AccordionModalSkeleton.tsx b/src/components/Accordions/AccordionModalSkeleton.tsx
new file mode 100644
index 00000000..75bdae98
--- /dev/null
+++ 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
index 827d9aad..0f49d268 100644
--- 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
index 5dcb627a..5a9a553c 100644
--- 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
index 0ceb41d5..f74563f9 100644
--- 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
index b4288115..8d50e4d2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -64,6 +64,7 @@ const config = {
       },
       screens: {
         sm700: '700px',
+        sm450: '450px',
       },
       width: {
         '215px': '215px',