Merge branch 'realTimeVisulization' into simulation

app/src/components/ui/inputs/MultiLevelDropDown.tsx

@@ -203,6 +203,7 @@ interface MultiLevelDropdownProps {
   onSelect: (selectedData: { name: string; fields: string }) => void;
   onUnselect: () => void;
   selectedValue?: { name: string; fields: string };
+  isLoading?: boolean;
 }
 
 // Main Multi-Level Dropdown Component
@@ -211,6 +212,7 @@ const MultiLevelDropdown = ({
   onSelect,
   onUnselect,
   selectedValue,
+  isLoading = false,
 }: MultiLevelDropdownProps) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -261,19 +263,22 @@ const MultiLevelDropdown = ({
           <div className="dropdown-content ">
             
             {/* loading list */}
-            {/* <div className="loading" /> */}
+            
 
             {/* Unselect Option */}
             <DropdownItem label="Unselect" onClick={handleItemUnselect} />
             {/* Nested Dropdown Items */}
-            {Object.entries(data).map(([key, value]) => (
-              <NestedDropdown
-                key={key}
-                label={key}
-                fields={Object.keys(value)}
-                onSelect={handleItemSelect}
-              />
-            ))}
+            {
+              isLoading ?  <div className="loading" /> :   
+              Object.entries(data).map(([key, value]) => (
+                <NestedDropdown
+                  key={key}
+                  label={key}
+                  fields={Object.keys(value)}
+                  onSelect={handleItemSelect}
+                />
+              ))
+            }
           </div>
         </div>
       )}