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/templates/SkeletonUI.tsx

@@ -1,21 +1,70 @@
 import React from "react";
 
+// Define the prop types
+interface SkeletonUIProps {
+  type: "asset" | "assetLibrary" | "assetWidget" | "default"; // You can expand this with other types as needed
+}
 
-const SkeletonUI = () => {
-  return (
-    <div className="skeleton-wrapper">
-      <div className="skeleton-header">
-        <div className="skeleton skeleton-title"></div>
-        <div className="skeleton skeleton-subtitle"></div>
-      </div>
+// Define the SkeletonUI component
+const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
+  console.log("type: ", type);
 
-      <div className="skeleton-content">
-        <div className="skeleton skeleton-card"></div>
-        <div className="skeleton skeleton-card"></div>
-      </div>
-      
-    </div>
-  );
+  // Function to render skeleton content based on 'type'
+  const renderSkeleton = () => {
+    switch (type) {
+      case "assetLibrary":
+        return (
+          <>
+            {Array(5)
+              .fill(null) // Create an array of 5 empty items
+              .map((_, index) => (
+                <div key={index} className="skeleton-content">
+                  <div className="skeleton asset-image"></div>
+                  <div className="skeleton asset-details"></div>
+                  <div className="skeleton organization"></div>
+                  <div className="skeleton asset-review"></div>
+                  <div className="skeleton button"></div>
+                </div>
+              ))}
+          </>
+        );
+
+      case "assetWidget":
+        return (
+          <div className="skeleton-content">
+            <div className="skeleton skeleton-widget"></div>
+            <div className="skeleton skeleton-widget"></div>
+          </div>
+        );
+      case "asset":
+        return (
+          <>
+            <div className="skeleton-content">
+              <div className="skeleton asset-name"></div>
+              <div className="skeleton asset"></div>
+            </div>
+            <div className="skeleton-content">
+              <div className="skeleton asset-name"></div>
+              <div className="skeleton asset"></div>
+            </div>
+          </>
+        );
+        
+      default:
+        return (
+          <div className="skeleton-content">
+            <div className="skeleton-header">
+              <div className="skeleton skeleton-title"></div>
+              <div className="skeleton skeleton-subtitle"></div>
+            </div>
+            <div className="skeleton skeleton-card"></div>
+            <div className="skeleton skeleton-card"></div>
+          </div>
+        );
+    }
+  };
+
+  return <div className="skeleton-wrapper">{renderSkeleton()}</div>;
 };
 
-export default SkeletonUI;
+export default SkeletonUI;