feat: skeleton of map while loading

jst-seminar-rostlab-tum · Nov 19, 2024 · 3df5d24 · 3df5d24
1 parent d5d2aad
commit 3df5d24
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 17 deletions.
diff --git a/src/app/elements/page.tsx b/src/app/elements/page.tsx
@@ -1,6 +1,7 @@
 import CustomAccordion from '@/components/Accordions/Accordion';
 import { CustomButton } from '@/components/Buttons/CustomButton';
 import { LineChart } from '@/components/Charts/LineChart';
+import MapSkeleton from '@/components/Map/MapSkeleton';
 import { BalanceOfTradeGraph } from '@/domain/entities/charts/BalanceOfTradeGraph.ts';
 import { CurrencyExchangeGraph } from '@/domain/entities/charts/CurrencyExchangeGraph.ts';
 import { InflationGraphs } from '@/domain/entities/charts/InflationGraphs.ts';
@@ -210,6 +211,7 @@ export default async function Elements() {
           <LineChart title="Headline and food inflation" data={inflationGraphsData} expandable />
         </div>
       </div>
+      <MapSkeleton />
     </div>
   );
 }
diff --git a/src/components/Map/Alerts/ConflictLayer.tsx b/src/components/Map/Alerts/ConflictLayer.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { CircleMarker } from 'react-leaflet';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 
-import { MAP_MAX_ZOOM } from '@/domain/constant/Map';
+import { MAP_MAX_ZOOM } from '@/domain/constant/map/Map.ts';
 import { ConflictType } from '@/domain/enums/ConflictType';
 import { useConflictQuery } from '@/domain/hooks/alertHooks';
 import ConflictOperations from '@/operations/alerts/ConflictOperations';

diff --git a/src/components/Map/Alerts/HazardLayer.tsx b/src/components/Map/Alerts/HazardLayer.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 
-import { MAP_MAX_ZOOM } from '@/domain/constant/Map';
+import { MAP_MAX_ZOOM } from '@/domain/constant/map/Map.ts';
 import { HazardType } from '@/domain/enums/HazardType';
 import { useHazardQuery } from '@/domain/hooks/alertHooks';
 import HazardOperations from '@/operations/alerts/HazardOperations';

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -2,7 +2,7 @@ import 'leaflet/dist/leaflet.css';
 
 import { MapContainer, ZoomControl } from 'react-leaflet';
 
-import { MAP_MAX_ZOOM, MAP_MIN_ZOOM } from '@/domain/constant/Map';
+import { MAP_MAX_ZOOM, MAP_MIN_ZOOM } from '@/domain/constant/map/Map.ts';
 import { MapProps } from '@/domain/props/MapProps';
 
 import { AlertContainer } from './Alerts/AlertContainer';

diff --git a/src/components/Map/MapSkeleton.tsx b/src/components/Map/MapSkeleton.tsx
@@ -1,13 +1,5 @@
-import { Skeleton } from '@nextui-org/skeleton';
+import MapSkeletonData from '@/domain/constant/map/MapSkeletonData';
 
 export default function MapSkeleton() {
-  return (
-    <div className="w-screen h-screen bg-blue-100">
-      <div className="w-full h-full p-4 flex flex-col items-center justify-center">
-        <div className="relative w-64 h-64 md:w-96 md:h-96 rounded-full bg-blue-500 overflow-hidden">
-          <Skeleton className="absolute w-full h-full rounded-full animate-pulse" />
-        </div>
-      </div>
-    </div>
-  );
+  return <MapSkeletonData className="w-full h-full animate-opacityPulse fill-countriesBase bg-ocean" />;
 }
diff --git a/src/domain/constant/Map.ts → src/domain/constant/map/Map.ts b/src/domain/constant/Map.ts → src/domain/constant/map/Map.ts
diff --git a/src/domain/constant/map/MapSkeletonData.tsx b/src/domain/constant/map/MapSkeletonData.tsx
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -76,6 +76,7 @@ const config = {
       animation: {
         blink: 'blink 1s step-end infinite',
         pulse: 'pulse 1.5s ease-in-out infinite',
+        opacityPulse: 'opacityPulse 1.5s infinite',
       },
       keyframes: {
         blink: {
@@ -85,6 +86,10 @@ const config = {
           '0%, 100%': { transform: 'scale(1)', opacity: '0.6' },
           '50%': { transform: 'scale(1.3)', opacity: '1' },
         },
+        opacityPulse: {
+          '0%, 100%': { 'fill-opacity': '1' },
+          '50%': { 'fill-opacity': '0.5' },
+        },
       },
     },
   },
@@ -117,8 +122,6 @@ const config = {
             chatbotUserMsg: '#E6F1FE',
             chatbotDivider: '#292d32',
             surfaceGrey: '#B0B0B0',
-            activeCountries: '#82bce0',
-            inactiveCountries: '#a7b3ba',
             subscribeText: '#284366',
             conflictProtest: '#0d657de6',
             conflictRiot: '#c95200e6',
@@ -140,6 +143,8 @@ const config = {
             vegetationLow: '#b99260',
             vegetationNormal: '#fff',
             vegetationHigh: '#b1dbb5',
+            countriesBase: '#fefeff',
+            ocean: '#91cccb'
           },
         },
         dark: {
@@ -167,15 +172,15 @@ const config = {
             chatbotUserMsg: '#26262A',
             chatbotDivider: '#556372',
             surfaceGrey: '#444444',
-            activeCountries: '#115884',
-            inactiveCountries: '#85929b',
             subscribeText: '#ffffff',
             conflictProtest: '#0d657de6',
             conflictRiot: '#c95200e6',
             conflictBattle: '#7d0631',
             conflictCivil: '#96badc',
             conflictExplosion: '#eaaf75',
             conflictStrategic: '#bec0c1',
+            countriesBase: '#0e6397',
+            ocean: '#111111'
           },
         },
       },