fix(map): use component-level loading skeletons

src/app/(main)/(map)/health-risk-analysis/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/health-risk-analysis/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import Timeline from "@components/olmap/HealthRiskAnalysis/Timeline";
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton, MapTimelineSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
 import { HealthRiskProvider } from "@components/olmap/HealthRiskAnalysis/HealthRiskContext";
-import HealthRiskStatistics from "@components/olmap/HealthRiskAnalysis/HealthRiskStatistics";
-import PredictDataPanel from "@components/olmap/HealthRiskAnalysis/PredictDataPanel";
 import StyleLegend from "@components/olmap/core/Controls/StyleLegend";
 import {
   RAINBOW_COLORS,
@@ -12,6 +12,26 @@ import {
 } from "@components/olmap/HealthRiskAnalysis/types";
 import { Box } from "@mui/material";
 
+const Timeline = dynamic(
+  () => import("@components/olmap/HealthRiskAnalysis/Timeline"),
+  {
+    loading: () => <MapTimelineSkeleton />,
+  },
+);
+const HealthRiskStatistics = dynamic(
+  () =>
+    import("@components/olmap/HealthRiskAnalysis/HealthRiskStatistics"),
+  {
+    loading: () => <MapPanelSkeleton variant="health-risk-analysis" />,
+  },
+);
+const PredictDataPanel = dynamic(
+  () => import("@components/olmap/HealthRiskAnalysis/PredictDataPanel"),
+  {
+    loading: () => null,
+  },
+);
+
 export default function Home() {
   return (
     <HealthRiskProvider>

src/app/(main)/(map)/hydraulic-simulation/burst-detection/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/hydraulic-simulation/burst-detection/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import BurstDetectionPanel from "@/components/olmap/BurstDetection/BurstDetectionPanel";
+
+const BurstDetectionPanel = dynamic(
+  () => import("@/components/olmap/BurstDetection/BurstDetectionPanel"),
+  {
+    loading: () => <MapPanelSkeleton variant="burst-detection" />,
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/hydraulic-simulation/burst-location/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/hydraulic-simulation/burst-location/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import BurstLocationPanel from "@/components/olmap/BurstLocation/BurstLocationPanel";
+
+const BurstLocationPanel = dynamic(
+  () => import("@/components/olmap/BurstLocation/BurstLocationPanel"),
+  {
+    loading: () => <MapPanelSkeleton variant="burst-location" />,
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/hydraulic-simulation/burst-simulation/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/hydraulic-simulation/burst-simulation/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import BurstPipeAnalysisPanel from "@/components/olmap/BurstSimulation/BurstPipeAnalysisPanel";
+
+const BurstPipeAnalysisPanel = dynamic(
+  () => import("@/components/olmap/BurstSimulation/BurstPipeAnalysisPanel"),
+  {
+    loading: () => <MapPanelSkeleton variant="burst-simulation" />,
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/hydraulic-simulation/contaminant-simulation/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/hydraulic-simulation/contaminant-simulation/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import WaterQualityPanel from "@/components/olmap/ContaminantSimulation/WaterQualityPanel";
+
+const WaterQualityPanel = dynamic(
+  () => import("@/components/olmap/ContaminantSimulation/WaterQualityPanel"),
+  {
+    loading: () => <MapPanelSkeleton variant="contaminant-simulation" />,
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/hydraulic-simulation/dma-leak-detection/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/hydraulic-simulation/dma-leak-detection/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import DMALeakDetectionPanel from "@/components/olmap/DMALeakDetection/DMALeakDetectionPanel";
+
+const DMALeakDetectionPanel = dynamic(
+  () => import("@/components/olmap/DMALeakDetection/DMALeakDetectionPanel"),
+  {
+    loading: () => <MapPanelSkeleton variant="dma-leak-detection" />,
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/hydraulic-simulation/flushing-analysis/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/hydraulic-simulation/flushing-analysis/page.tsx

@@ -1,7 +1,16 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import FlushingAnalysisPanel from "@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel";
+
+const FlushingAnalysisPanel = dynamic(
+  () => import("@/components/olmap/FlushingAnalysis/FlushingAnalysisPanel"),
+  {
+    loading: () => <MapPanelSkeleton variant="flushing-analysis" />,
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/monitoring-place-optimization/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/monitoring-place-optimization/page.tsx

@@ -1,7 +1,21 @@
 "use client";
 
+import dynamic from "next/dynamic";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
-import MonitoringPlaceOptimizationPanel from "@components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel";
+
+const MonitoringPlaceOptimizationPanel = dynamic(
+  () =>
+    import(
+      "@components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel"
+    ),
+  {
+    loading: () => (
+      <MapPanelSkeleton variant="monitoring-place-optimization" />
+    ),
+  },
+);
 
 export default function Home() {
   return (

src/app/(main)/(map)/network-simulation/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/network-simulation/page.tsx

@@ -1,11 +1,32 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { useCallback, useState } from "react";
-import Timeline from "@components/olmap/core/Controls/Timeline";
+
+import {
+  MapPanelSkeleton,
+  MapTimelineSkeleton,
+} from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
 
-import SCADADeviceList from "@components/olmap/SCADA/SCADADeviceList";
-import SCADADataPanel from "@components/olmap/SCADA/SCADADataPanel";
+const Timeline = dynamic(
+  () => import("@components/olmap/core/Controls/Timeline"),
+  {
+    loading: () => <MapTimelineSkeleton />,
+  },
+);
+const SCADADeviceList = dynamic(
+  () => import("@components/olmap/SCADA/SCADADeviceList"),
+  {
+    loading: () => <MapPanelSkeleton variant="network-simulation" />,
+  },
+);
+const SCADADataPanel = dynamic(
+  () => import("@components/olmap/SCADA/SCADADataPanel"),
+  {
+    loading: () => null,
+  },
+);
 
 export default function Home() {
   const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);

src/app/(main)/(map)/scada-data-cleaning/loading.tsx

@@ -1,5 +0,0 @@
-import { MapSkeleton } from "@components/loading/MapSkeleton";
-
-export default function Loading() {
-  return <MapSkeleton />;
-}

src/app/(main)/(map)/scada-data-cleaning/page.tsx

@@ -1,10 +1,23 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { useCallback, useState } from "react";
+
+import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
 import MapToolbar from "@components/olmap/core/Controls/Toolbar";
 
-import SCADADeviceList from "@components/olmap/SCADA/SCADADeviceList";
-import SCADADataPanel from "@components/olmap/SCADA/SCADADataPanel";
+const SCADADeviceList = dynamic(
+  () => import("@components/olmap/SCADA/SCADADeviceList"),
+  {
+    loading: () => <MapPanelSkeleton variant="scada-data-cleaning" />,
+  },
+);
+const SCADADataPanel = dynamic(
+  () => import("@components/olmap/SCADA/SCADADataPanel"),
+  {
+    loading: () => null,
+  },
+);
 
 export default function Home() {
   const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);