fix(map): use component-level loading skeletons

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[]>([]);