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/Assets.tsx

@@ -13,6 +13,7 @@ import workStation from "../../../assets/image/categories/workStation.png";
 import machines from "../../../assets/image/categories/machines.png";
 import feneration from "../../../assets/image/categories/feneration.png";
 import worker from "../../../assets/image/categories/worker.png";
+import SkeletonUI from "../../templates/SkeletonUI";
 // -------------------------------------
 
 interface AssetProp {
@@ -41,6 +42,7 @@ const Assets: React.FC = () => {
   const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
   const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
   const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
+  const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
 
   const handleSearchChange = (value: string) => {
     const searchTerm = value.toLowerCase();
@@ -68,6 +70,7 @@ const Assets: React.FC = () => {
 
     setCategoryAssets(filteredModels);
   };
+
   useEffect(() => {
     const filteredAssets = async () => {
       try {
@@ -104,7 +107,9 @@ const Assets: React.FC = () => {
       { category: "Workers", categoryImage: worker },
     ]);
   }, []);
+
   const fetchCategoryAssets = async (asset: any) => {
+    setisLoading(true);
     setSelectedCategory(asset);
     if (asset === "Feneration") {
       const localAssets: AssetProp[] = [
@@ -130,12 +135,16 @@ const Assets: React.FC = () => {
       ];
       setCategoryAssets(localAssets);
       setFiltereredAssets(localAssets);
+      setisLoading(false);
     } else {
       try {
         const res = await getCategoryAsset(asset);
         setCategoryAssets(res);
         setFiltereredAssets(res);
-      } catch (error) {}
+        setisLoading(false); // End loading
+      } catch (error) {
+        setisLoading(false);
+      }
     }
   };
   return (
@@ -143,7 +152,9 @@ const Assets: React.FC = () => {
       <Search onChange={handleSearchChange} />
       <div className="assets-list-section">
         <section>
-          {searchValue ? (
+          {isLoading ? (
+            <SkeletonUI type="asset" /> // Show skeleton when loading
+          ) : searchValue ? (
             <div className="assets-result">
               <div className="assets-wrapper">
                 <div className="searched-content">