Refactor Assets component to streamline category fetching and enhance loading state handling; improve SkeletonUI styles for better asset representation

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

@@ -90,24 +90,7 @@ const Assets: React.FC = () => {
 
   useEffect(() => {
     setCategoryList([
-      {
+      { category: "Fenestration", categoryImage: feneration },
-        assetName: "Doors",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
-      {
-        assetName: "Windows",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
-      {
-        assetName: "Pillars",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
       { category: "Vehicles", categoryImage: vehicle },
       { category: "Workstation", categoryImage: workStation },
       { category: "Machines", categoryImage: machines },
@@ -121,34 +104,6 @@ const Assets: React.FC = () => {
   const fetchCategoryAssets = async (asset: any) => {
     setisLoading(true);
     setSelectedCategory(asset);
-    if (asset === "Feneration") {
-      const localAssets: AssetProp[] = [
-        {
-          filename: "arch",
-          category: "Feneration",
-          url: arch,
-          thumbnail: archThumbnail,
-          tags: "arch",
-        },
-        {
-          filename: "door",
-          category: "Feneration",
-          url: door,
-          thumbnail: feneration,
-          tags: "door",
-        },
-        {
-          filename: "window",
-          category: "Feneration",
-          url: window,
-          thumbnail: windowThumbnail,
-          tags: "window",
-        },
-      ];
-      setCategoryAssets(localAssets);
-      setFiltereredAssets(localAssets);
-      setisLoading(false);
-    } else {
     try {
       const res = await getCategoryAsset(asset);
       setCategoryAssets(res);
@@ -159,7 +114,6 @@ const Assets: React.FC = () => {
       echo.error("failed to fetch assets");
       setisLoading(false);
     }
-    }
   };
 
   return (
@@ -167,9 +121,12 @@ const Assets: React.FC = () => {
       <Search onChange={handleSearchChange} />
       <div className="assets-list-section">
         <section>
-          {isLoading ? (
+          {(() => {
-            <SkeletonUI type="asset" /> // Show skeleton when loading
+            if (isLoading) {
-          ) : searchValue ? (
+              return <SkeletonUI type="asset" />; // Show skeleton when loading
+            }
+            if (searchValue) {
+              return (
                 <div className="assets-result">
                   <div className="assets-wrapper">
                     <div className="searched-content">
@@ -203,13 +160,15 @@ const Assets: React.FC = () => {
                     </div>
                   </div>
                 </div>
-          ) : (
+              );
-            <>
+            }
-              {selectedCategory ? (
+
+            if (selectedCategory) {
+              return (
                 <div className="assets-wrapper">
                   <h2>
-                    {selectedCategory}{" "}
+                    {selectedCategory}
-                    <div
+                    <button
                       className="back-button"
                       id="asset-backButtom"
                       onClick={() => {
@@ -218,13 +177,12 @@ const Assets: React.FC = () => {
                       }}
                     >
                       ← Back
-                    </div>
+                    </button>
                   </h2>
                   <div className="assets-container">
-                    {categoryAssets &&
+                    {categoryAssets?.map((asset: any, index: number) => (
-                      categoryAssets?.map((asset: any, index: number) => (
                       <div
-                          key={index}
+                        key={`${index}-${asset}`}
                         className="assets"
                         id={asset.filename}
                         title={asset.filename}
@@ -255,9 +213,18 @@ const Assets: React.FC = () => {
                         </div>
                       </div>
                     ))}
+                    {categoryAssets.length === 0 && (
+                      <div className="no-asset">
+                        🚧 The asset shelf is empty. We're working on filling it
+                        up!
+                      </div>
+                    )}
                   </div>
                 </div>
-              ) : (
+              );
+            }
+
+            return (
               <div className="assets-wrapper">
                 <h2>Categories</h2>
                 <div className="categories-container">
@@ -275,7 +242,7 @@ const Assets: React.FC = () => {
                         onClick={() => fetchCategoryAssets(category)}
                       >
                         <img
-                            src={categoryInfo?.categoryImage || ""}
+                          src={categoryInfo?.categoryImage ?? ""}
                           alt={category}
                           className="category-image"
                           draggable={false}
@@ -286,9 +253,8 @@ const Assets: React.FC = () => {
                   })}
                 </div>
               </div>
-              )}
+            );
-            </>
+          })()}
-          )}
         </section>
       </div>
     </div>

app/src/components/templates/SkeletonUI.tsx

@@ -7,7 +7,6 @@ interface SkeletonUIProps {
 
 // Define the SkeletonUI component
 const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
-
   // Function to render skeleton content based on 'type'
   const renderSkeleton = () => {
     switch (type) {
@@ -38,6 +37,8 @@ const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
       case "asset":
         return (
           <>
+            <div className="skeleton asset-category-title"></div>
+            <div className="skeleton-content-asset">
               <div className="skeleton-content">
                 <div className="skeleton asset-name"></div>
                 <div className="skeleton asset"></div>
@@ -46,6 +47,15 @@ const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
                 <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>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+            </div>
           </>
         );
 

app/src/styles/layout/sidebar.scss

@@ -1278,7 +1278,7 @@
     }
   }
   .toggle-sidebar-ui-button {
-    svg{
+    svg {
       transform: scaleX(-1);
     }
     .tooltip {
@@ -1455,7 +1455,11 @@
       height: 100%;
       gap: 6px;
       padding: 2px;
-
+      .no-asset {
+        text-align: center;
+        margin: 12px;
+        width: 100%;
+      }
       .assets {
         width: 122px;
         height: 95px;

app/src/styles/layout/skeleton.scss

@@ -1,18 +1,8 @@
 .skeleton-wrapper {
   // max-width: 600px;
-    display: flex;
   margin: 0 auto;
   width: 100%;
 
-    .asset-name {
-      width: 40%;
-      height: 10px;
-    }
-    
-    .asset {
-      width: 100%;
-      height: 100%;
-    }
   .skeleton {
     background: var(--background-color-gray);
 
@@ -31,7 +21,7 @@
         90deg,
         rgba(255, 255, 255, 0) 0%,
         rgba(255, 255, 255, 0.2) 20%,
-        rgba(255, 255, 255, 0.5) 60%,
+        rgba(255, 255, 255, 0.39) 60%,
         rgba(255, 255, 255, 0) 100%
       );
       transform: translateX(-100%);
@@ -66,6 +56,34 @@
   }
 }
 
+.asset-category-title{
+  width: 60%;
+  height: 12px;
+  margin-bottom: 12px;
+  margin-top: 4px;
+}
+.skeleton-content-asset{
+  display: flex;
+  height: calc(95px * 2 + 10px);
+  gap: 10px;
+  flex-wrap: wrap;
+  .skeleton-content {
+    gap: 8px;
+    flex-direction: column;
+    min-width: 122px;
+    min-height: 95px;
+    .asset-name {
+      width: 40%;
+      height: 10px;
+    }
+    .asset {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 @keyframes shimmer {
   100% {
     transform: translateX(100%);