feat: Implement loading skeletons in various components

- Added SkeletonUI component to display loading states in Assets, MarketPlace, ROISummary, ThroughputSummary, and other relevant components.
- Integrated loading state management in Assets and MarketPlace to show skeletons while fetching data.
- Updated styles for skeletons to enhance visual representation during loading.
- Refactored existing components to utilize the new SkeletonUI for better user experience during data loading.
- Adjusted sidebar animations for smoother transitions.

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -31,10 +31,10 @@ const SideBarLeft: React.FC = () => {
   };
 
   return (
-    <div className="sidebar-left-wrapper">
+    <div className={`sidebar-left-wrapper ${toggleUI ? "open" : "closed"}`}>
       <Header />
       {toggleUI && (
-        <div className="sidebar-left-container">
+        <div className={`sidebar-left-container `}>
           {activeModule === "visualization" ? (
             <>
               <ToggleHeader
@@ -79,3 +79,5 @@ const SideBarLeft: React.FC = () => {
 };
 
 export default SideBarLeft;
+
+// sidebar-left-container opemn close sidebar-left-container smoothly