refactor: update loading styles and introduce faint gradient variables

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -13,7 +13,6 @@ import { useAsset3dWidget, useZones } from "../../../store/store";
 import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
 import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
 
-
 type Side = "top" | "bottom" | "left" | "right";
 
 type FormattedZoneData = Record<
@@ -25,7 +24,7 @@ type FormattedZoneData = Record<
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
-    zoneViewPortPosition: number[]
+    zoneViewPortPosition: number[];
     widgets: Widget[];
   }
 >;
@@ -45,8 +44,10 @@ const RealTimeVisulization: React.FC = () => {
   const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  const { zones } = useZones()
-  const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { zones } = useZones();
+  const [floatingWidgets, setFloatingWidgets] = useState<
+    Record<string, { zoneName: string; zoneId: string; objects: any[] }>
+  >({});
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   useEffect(() => {
     async function GetZoneData() {
@@ -57,28 +58,30 @@ const RealTimeVisulization: React.FC = () => {
         if (!Array.isArray(response)) {
           return;
         }
-        const formattedData = response.reduce<FormattedZoneData>((acc, zone) => {
-          acc[zone.zoneName] = {
-            activeSides: [],
-            panelOrder: [],
-            lockedPanels: [],
-            zoneId: zone.zoneId,
-            zoneViewPortTarget: zone.viewPortCenter,
-            zoneViewPortPosition: zone.viewPortposition,
-            widgets: [],
-          };
-          return acc;
-        }, {});
+        const formattedData = response.reduce<FormattedZoneData>(
+          (acc, zone) => {
+            acc[zone.zoneName] = {
+              activeSides: [],
+              panelOrder: [],
+              lockedPanels: [],
+              zoneId: zone.zoneId,
+              zoneViewPortTarget: zone.viewPortCenter,
+              zoneViewPortPosition: zone.viewPortposition,
+              widgets: [],
+            };
+            return acc;
+          },
+          {}
+        );
         setZonesData(formattedData);
       } catch (error) {
-        console.log('error: ', error);
+        console.log("error: ", error);
       }
     }
 
     GetZoneData();
   }, []); // Removed `zones` from dependencies
 
-
   useEffect(() => {
     setZonesData((prev) => {
       if (!selectedZone) return prev;
@@ -97,10 +100,8 @@ const RealTimeVisulization: React.FC = () => {
       };
     });
   }, [selectedZone]);
-  
-  useEffect(() => {
 
-  }, [floatingWidgets])
+  useEffect(() => {}, [floatingWidgets]);
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -121,24 +122,31 @@ const RealTimeVisulization: React.FC = () => {
       position: [relativeY, relativeX], // Y first because of top/left style
     };
     // Only set zone if it’s not already in the store (prevents overwriting objects)
-    const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+    const existingZone =
+      useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
     if (!existingZone) {
-      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+      useDroppedObjectsStore
+        .getState()
+        .setZone(selectedZone.zoneName, selectedZone.zoneId);
     }
     // Add the dropped object to the zone
-    useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
+    useDroppedObjectsStore
+      .getState()
+      .addObject(selectedZone.zoneName, newObject);
     setFloatingWidgets((prevWidgets) => ({
       ...prevWidgets,
       [selectedZone.zoneName]: {
         ...prevWidgets[selectedZone.zoneName],
         zoneName: selectedZone.zoneName,
         zoneId: selectedZone.zoneId,
-        objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject],
+        objects: [
+          ...(prevWidgets[selectedZone.zoneName]?.objects || []),
+          newObject,
+        ],
       },
     }));
   };
 
-
   return (
     <div
       ref={containerRef}
@@ -149,7 +157,6 @@ const RealTimeVisulization: React.FC = () => {
         width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
         left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
-
     >
       <div
         className="scene-container"
@@ -162,8 +169,7 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-
-
+        <Scene />
       </div>
       <DroppedObjects />
       {activeModule === "visualization" && (