From 3df5d24ceb9d72f5980858cd97907a4366f9f980 Mon Sep 17 00:00:00 2001 From: Lukas0912 Date: Tue, 19 Nov 2024 19:00:32 +0100 Subject: [PATCH] feat: skeleton of map while loading --- src/app/elements/page.tsx | 2 ++ src/components/Map/Alerts/ConflictLayer.tsx | 2 +- src/components/Map/Alerts/HazardLayer.tsx | 2 +- src/components/Map/Map.tsx | 2 +- src/components/Map/MapSkeleton.tsx | 12 ++---------- src/domain/constant/{ => map}/Map.ts | 0 src/domain/constant/map/MapSkeletonData.tsx | 15 +++++++++++++++ tailwind.config.js | 13 +++++++++---- 8 files changed, 31 insertions(+), 17 deletions(-) rename src/domain/constant/{ => map}/Map.ts (100%) create mode 100644 src/domain/constant/map/MapSkeletonData.tsx diff --git a/src/app/elements/page.tsx b/src/app/elements/page.tsx index c2e912a3..2359416d 100644 --- 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() { + ); } diff --git a/src/components/Map/Alerts/ConflictLayer.tsx b/src/components/Map/Alerts/ConflictLayer.tsx index bebb6882..76d3524e 100644 --- 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 index f508a878..d1be8c6c 100644 --- 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 index a13e5563..051e0abf 100644 --- 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 index 670819a8..b8999cd3 100644 --- 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 ( -
-
-
- -
-
-
- ); + return ; } diff --git a/src/domain/constant/Map.ts b/src/domain/constant/map/Map.ts similarity index 100% rename from src/domain/constant/Map.ts rename to src/domain/constant/map/Map.ts diff --git a/src/domain/constant/map/MapSkeletonData.tsx b/src/domain/constant/map/MapSkeletonData.tsx new file mode 100644 index 00000000..48297aba --- /dev/null +++ b/src/domain/constant/map/MapSkeletonData.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +function MapSkeletonData(props: React.SVGProps) { + return ( + + + + + + + + ); +} + +export default MapSkeletonData; diff --git a/tailwind.config.js b/tailwind.config.js index d867d434..9e74a188 100644 --- 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,8 +172,6 @@ const config = { chatbotUserMsg: '#26262A', chatbotDivider: '#556372', surfaceGrey: '#444444', - activeCountries: '#115884', - inactiveCountries: '#85929b', subscribeText: '#ffffff', conflictProtest: '#0d657de6', conflictRiot: '#c95200e6', @@ -176,6 +179,8 @@ const config = { conflictCivil: '#96badc', conflictExplosion: '#eaaf75', conflictStrategic: '#bec0c1', + countriesBase: '#0e6397', + ocean: '#111111' }, }, },