Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui

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

@@ -18,6 +18,7 @@ import safety from "../../../assets/image/categories/safety.png";
 import feneration from "../../../assets/image/categories/feneration.png";
 import archThumbnail from "../../../assets/image/localAssets/arch.png";
 import windowThumbnail from "../../../assets/image/localAssets/window.png";
+import SkeletonUI from "../../templates/SkeletonUI";
 // -------------------------------------
 
 interface AssetProp {
@@ -46,6 +47,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();
@@ -73,6 +75,7 @@ const Assets: React.FC = () => {
 
     setCategoryAssets(filteredModels);
   };
+
   useEffect(() => {
     const filteredAssets = async () => {
       try {
@@ -112,7 +115,9 @@ const Assets: React.FC = () => {
       { category: "Office", categoryImage: office },
     ]);
   }, []);
+
   const fetchCategoryAssets = async (asset: any) => {
+    setisLoading(true);
     setSelectedCategory(asset);
     if (asset === "Feneration") {
       const localAssets: AssetProp[] = [
@@ -140,13 +145,15 @@ const Assets: React.FC = () => {
       ];
       setCategoryAssets(localAssets);
       setFiltereredAssets(localAssets);
+      setisLoading(false);
     } else {
       try {
         const res = await getCategoryAsset(asset);
         setCategoryAssets(res);
         setFiltereredAssets(res);
+        setisLoading(false); // End loading
       } catch (error) {
-        console.log(error);
+        setisLoading(false);
       }
     }
   };
@@ -155,7 +162,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">