From eda49fb8bde2da0ffc6faebba6ea32f05e5fe74a Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 27 Dec 2023 02:18:10 +0700
Subject: [PATCH] loading skeleton for all tabs

---
 .../view/pages/explore/tabs/FeaturedTab.tsx   |  72 ++++---
 .../v2/view/pages/explore/tabs/MediaTab.tsx   | 153 +++++++--------
 .../v2/view/pages/explore/tabs/WeightsTab.tsx | 185 +++++++++---------
 .../profile_view/tabs/BookmarksTab.tsx        |  81 +++++---
 .../profile/profile_view/tabs/MediaTab.tsx    |  82 ++++----
 .../profile/profile_view/tabs/WeightsTab.tsx  | 155 ++++++++-------
 6 files changed, 397 insertions(+), 331 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
index ce92f8364f..d14c5f0885 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import SkeletonCard from "components/common/Card/SkeletonCard";
@@ -11,7 +11,7 @@ import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_fi
 
 export default function FeaturedTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [list, listSet] = useState<MediaFile[]>([]);
 
   const media = useLazyLists({
@@ -22,6 +22,14 @@ export default function FeaturedTab() {
     addQueries: { per_page: 12 },
   });
 
+  useEffect(() => {
+    if (media.status === 1) {
+      setIsLoading(true);
+    } else if (media.status === 3) {
+      setIsLoading(false);
+    }
+  }, [media.status]);
+
   return (
     <div className="d-flex flex-column gap-4">
       <div>
@@ -34,36 +42,44 @@ export default function FeaturedTab() {
         </div>
 
         {isLoading ? (
-          <div className="row gx-3 gy-3">
-            {Array.from({ length: 6 }).map((_, index) => (
+          <div className="row gx-3 gy-3 mt-1">
+            {Array.from({ length: 12 }).map((_, index) => (
               <SkeletonCard key={index} />
             ))}
           </div>
         ) : (
-          <MasonryGrid
-            gridRef={gridContainerRef}
-            onLayoutComplete={() => console.log("Layout complete!")}
-          >
-            {media.list.map((data, index) => {
-              let card = (
-                <AudioCard
-                  key={index}
-                  data={data}
-                  type="media"
-                  showCreator={true}
-                  showCover={true}
-                />
-              );
-              return (
-                <div
-                  key={index}
-                  className="col-12 col-lg-6 col-xxl-4 grid-item"
-                >
-                  {card}
-                </div>
-              );
-            })}
-          </MasonryGrid>
+          <>
+            {media.list.length === 0 && media.status === 3 ? (
+              <div className="text-center mt-4 opacity-75">
+                No featured media.
+              </div>
+            ) : (
+              <MasonryGrid
+                gridRef={gridContainerRef}
+                onLayoutComplete={() => console.log("Layout complete!")}
+              >
+                {media.list.map((data, index) => {
+                  let card = (
+                    <AudioCard
+                      key={index}
+                      data={data}
+                      type="media"
+                      showCreator={true}
+                      showCover={true}
+                    />
+                  );
+                  return (
+                    <div
+                      key={index}
+                      className="col-12 col-lg-6 col-xxl-4 grid-item"
+                    >
+                      {card}
+                    </div>
+                  );
+                })}
+              </MasonryGrid>
+            )}
+          </>
         )}
       </div>
       {/* <div>
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
index caeeb3fb2b..137ad97373 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
@@ -17,7 +17,6 @@ import InfiniteScroll from "react-infinite-scroll-component";
 
 export default function MediaTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading] = useState(false);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
   const [list, listSet] = useState<MediaFile[]>([]);
@@ -81,83 +80,83 @@ export default function MediaTab() {
         </div>
       </div>
       <AudioPlayerProvider>
-        {isLoading ? (
-          <div className="row gx-3 gy-3">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <SkeletonCard key={index} />
-            ))}
-          </div>
-        ) : (
-          <InfiniteScroll
-            dataLength={media.list.length}
-            next={media.getMore}
-            hasMore={!media.list.length || !!media.next}
-            loader={
-              <div className="mt-4 d-flex justify-content-center">
-                <div className="spinner-border text-light" role="status">
-                  <span className="visually-hidden">Loading...</span>
+        <InfiniteScroll
+          dataLength={media.list.length}
+          next={media.getMore}
+          hasMore={!media.list.length || !!media.next}
+          loader={
+            <div className="row gx-3 gy-3 mt-1">
+              {Array.from({ length: 12 }).map((_, index) => (
+                <SkeletonCard key={index} />
+              ))}
+            </div>
+          }
+          endMessage={
+            <p className="text-center mt-4 opacity-75">No more results.</p>
+          }
+          className="overflow-hidden"
+        >
+          {showMasonryGrid && (
+            <>
+              {media.list.length === 0 && media.status === 3 ? (
+                <div className="text-center mt-4 opacity-75">
+                  No media created yet.
                 </div>
-              </div>
-            }
-            endMessage={
-              <p className="text-center mt-4 opacity-75">No more results.</p>
-            }
-            className="overflow-hidden"
-          >
-            {showMasonryGrid && (
-              <MasonryGrid
-                gridRef={gridContainerRef}
-                onLayoutComplete={() => console.log("Layout complete!")}
-              >
-                {media.list.map((data: any, index: number) => {
-                  let card;
-                  switch (data.media_type) {
-                    case "audio":
-                      card = (
-                        <AudioCard
-                          key={index}
-                          data={data}
-                          type="media"
-                          showCreator={true}
-                        />
-                      );
-                      break;
-                    case "image":
-                      card = (
-                        <ImageCard
-                          key={index}
-                          data={data}
-                          type="media"
-                          showCreator={true}
-                        />
-                      );
-                      break;
-                    case "video":
-                      card = (
-                        <VideoCard
-                          key={index}
-                          data={data}
-                          type="media"
-                          showCreator={true}
-                        />
-                      );
-                      break;
-                    default:
-                      card = <div>Unsupported media type</div>;
-                  }
-                  return (
-                    <div
-                      key={index}
-                      className="col-12 col-sm-6 col-xl-4 grid-item"
-                    >
-                      {card}
-                    </div>
-                  );
-                })}
-              </MasonryGrid>
-            )}
-          </InfiniteScroll>
-        )}
+              ) : (
+                <MasonryGrid
+                  gridRef={gridContainerRef}
+                  onLayoutComplete={() => console.log("Layout complete!")}
+                >
+                  {media.list.map((data: any, index: number) => {
+                    let card;
+                    switch (data.media_type) {
+                      case "audio":
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="media"
+                            showCreator={true}
+                          />
+                        );
+                        break;
+                      case "image":
+                        card = (
+                          <ImageCard
+                            key={index}
+                            data={data}
+                            type="media"
+                            showCreator={true}
+                          />
+                        );
+                        break;
+                      case "video":
+                        card = (
+                          <VideoCard
+                            key={index}
+                            data={data}
+                            type="media"
+                            showCreator={true}
+                          />
+                        );
+                        break;
+                      default:
+                        card = <div>Unsupported media type</div>;
+                    }
+                    return (
+                      <div
+                        key={index}
+                        className="col-12 col-sm-6 col-xl-4 grid-item"
+                      >
+                        {card}
+                      </div>
+                    );
+                  })}
+                </MasonryGrid>
+              )}
+            </>
+          )}
+        </InfiniteScroll>
       </AudioPlayerProvider>
     </>
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
index 8267ae2c81..052a42fd30 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
@@ -18,7 +18,6 @@ import { useLazyLists } from "hooks";
 
 export default function WeightsTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading] = useState(false);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
   const [list, listSet] = useState<Weight[]>([]);
@@ -121,99 +120,99 @@ export default function WeightsTab() {
         </div>
       </div>
       <AudioPlayerProvider>
-        {isLoading ? (
-          <div className="row gx-3 gy-3">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <SkeletonCard key={index} />
-            ))}
-          </div>
-        ) : (
-          <InfiniteScroll
-            dataLength={weights.list.length}
-            next={weights.getMore}
-            hasMore={!weights.list.length || !!weights.next}
-            loader={
-              <div className="mt-4 d-flex justify-content-center">
-                <div className="spinner-border text-light" role="status">
-                  <span className="visually-hidden">Loading...</span>
+        <InfiniteScroll
+          dataLength={weights.list.length}
+          next={weights.getMore}
+          hasMore={!weights.list.length || !!weights.next}
+          loader={
+            <div className="row gx-3 gy-3 mt-1">
+              {Array.from({ length: 12 }).map((_, index) => (
+                <SkeletonCard key={index} />
+              ))}
+            </div>
+          }
+          endMessage={
+            <p className="text-center mt-4 opacity-75">No more results.</p>
+          }
+          className="overflow-hidden"
+        >
+          {showMasonryGrid && (
+            <>
+              {weights.list.length === 0 && weights.status === 3 ? (
+                <div className="text-center mt-4 opacity-75">
+                  No weight created yet.
                 </div>
-              </div>
-            }
-            endMessage={
-              <p className="text-center mt-4 opacity-75">No more results.</p>
-            }
-            className="overflow-hidden"
-          >
-            {showMasonryGrid && (
-              <MasonryGrid
-                gridRef={gridContainerRef}
-                onLayoutComplete={() => console.log("Layout complete!")}
-              >
-                {weights.list.map((data: any, index: number) => {
-                  let card;
-                  switch (data.weights_category) {
-                    case WeightCategory.TTS:
-                      card = (
-                        <AudioCard
-                          key={index}
-                          data={data}
-                          type="weights"
-                          showCreator={true}
-                          showCover={true}
-                        />
-                      );
-                      break;
-                    case WeightCategory.VC:
-                      card = (
-                        <AudioCard
-                          key={index}
-                          data={data}
-                          type="weights"
-                          showCreator={true}
-                          showCover={true}
-                        />
-                      );
-                      break;
-                    case WeightCategory.ZS:
-                      card = (
-                        <AudioCard
-                          key={index}
-                          data={data}
-                          type="weights"
-                          showCreator={true}
-                          showCover={true}
-                        />
-                      );
-                      break;
-                    case WeightCategory.SD:
-                      card = (
-                        <ImageCard
-                          key={index}
-                          data={data}
-                          type="weights"
-                          showCreator={true}
-                        />
-                      );
-                      break;
-                    case WeightCategory.VOCODER:
-                      card = <></>;
-                      break;
-                    default:
-                      card = <div>Unsupported weight type</div>;
-                  }
-                  return (
-                    <div
-                      key={index}
-                      className="col-12 col-sm-6 col-xl-4 grid-item"
-                    >
-                      {card}
-                    </div>
-                  );
-                })}
-              </MasonryGrid>
-            )}
-          </InfiniteScroll>
-        )}
+              ) : (
+                <MasonryGrid
+                  gridRef={gridContainerRef}
+                  onLayoutComplete={() => console.log("Layout complete!")}
+                >
+                  {weights.list.map((data: any, index: number) => {
+                    let card;
+                    switch (data.weights_category) {
+                      case WeightCategory.TTS:
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                            showCover={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.VC:
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                            showCover={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.ZS:
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                            showCover={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.SD:
+                        card = (
+                          <ImageCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.VOCODER:
+                        card = <></>;
+                        break;
+                      default:
+                        card = <div>Unsupported weight type</div>;
+                    }
+                    return (
+                      <div
+                        key={index}
+                        className="col-12 col-sm-6 col-xl-4 grid-item"
+                      >
+                        {card}
+                      </div>
+                    );
+                  })}
+                </MasonryGrid>
+              )}
+            </>
+          )}
+        </InfiniteScroll>
       </AudioPlayerProvider>
     </>
   );
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
index e7b407e98b..6248ec3371 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -16,7 +16,7 @@ import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/Ge
 
 export default function BookmarksTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [selectedFilter, setSelectedFilter] = useState("all");
   // const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<any[]>([]);
@@ -27,7 +27,7 @@ export default function BookmarksTab({ username }: { username: string }) {
     listSet,
     requestList: true,
     urlParam: username,
-    addQueries: { per_page: 12 },
+    addQueries: { per_page: 24 },
   });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
@@ -90,6 +90,14 @@ export default function BookmarksTab({ username }: { username: string }) {
     setSelectedFilter(selectedOption.value);
   };
 
+  useEffect(() => {
+    if (bookmarks.status === 1) {
+      setIsLoading(true);
+    } else if (bookmarks.status === 3) {
+      setIsLoading(false);
+    }
+  }, [bookmarks.status]);
+
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -135,38 +143,49 @@ export default function BookmarksTab({ username }: { username: string }) {
       </div>
       {isLoading ? (
         <div className="row gx-3 gy-3">
-          {Array.from({ length: 6 }).map((_, index) => (
+          {Array.from({ length: 12 }).map((_, index) => (
             <SkeletonCard key={index} />
           ))}
         </div>
       ) : (
-        <MasonryGrid
-          gridRef={gridContainerRef}
-          onLayoutComplete={() => console.log("Layout complete!")}
-        >
-          {bookmarks.list.map((data: any, index: number) => {
-            console.log("🧣", data);
-            let card;
-            switch (data.media_type) {
-              case "audio":
-                card = <AudioCard key={index} data={data} type="weights" />;
-                break;
-              case "image":
-                card = <ImageCard key={index} data={data} type="weights" />;
-                break;
-              case "video":
-                card = <VideoCard key={index} data={data} type="weights" />;
-                break;
-              default:
-                card = <div key={index}>Unsupported media type</div>;
-            }
-            return (
-              <div key={index} className="col-12 col-sm-6 col-xl-4 grid-item">
-                {card}
-              </div>
-            );
-          })}
-        </MasonryGrid>
+        <>
+          {bookmarks.list.length === 0 && bookmarks.status === 3 ? (
+            <div className="text-center mt-4 opacity-75">
+              No bookmarked weights yet.
+            </div>
+          ) : (
+            <MasonryGrid
+              gridRef={gridContainerRef}
+              onLayoutComplete={() => console.log("Layout complete!")}
+            >
+              {bookmarks.list.map((data: any, index: number) => {
+                console.log("🧣", data);
+                let card;
+                switch (data.media_type) {
+                  case "audio":
+                    card = <AudioCard key={index} data={data} type="weights" />;
+                    break;
+                  case "image":
+                    card = <ImageCard key={index} data={data} type="weights" />;
+                    break;
+                  case "video":
+                    card = <VideoCard key={index} data={data} type="weights" />;
+                    break;
+                  default:
+                    card = <div key={index}>Unsupported media type</div>;
+                }
+                return (
+                  <div
+                    key={index}
+                    className="col-12 col-sm-6 col-xl-4 grid-item"
+                  >
+                    {card}
+                  </div>
+                );
+              })}
+            </MasonryGrid>
+          )}
+        </>
       )}
 
       <div className="d-flex justify-content-end mt-4">
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
index 9b8ef765cc..9276890242 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -18,7 +18,7 @@ import { useListContent } from "hooks";
 
 export default function MediaTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
   const [list, listSet] = useState<MediaFile[]>([]);
@@ -30,7 +30,7 @@ export default function MediaTab({ username }: { username: string }) {
     // pagePreset: 1,
     requestList: true,
     urlParam: username,
-    addQueries: { per_page: 12 },
+    addQueries: { per_page: 24 },
   });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
@@ -57,6 +57,14 @@ export default function MediaTab({ username }: { username: string }) {
     resetMasonryGrid();
   };
 
+  useEffect(() => {
+    if (media.status === 1) {
+      setIsLoading(true);
+    } else if (media.status === 3) {
+      setIsLoading(false);
+    }
+  }, [media.status]);
+
   const filterOptions = [
     { value: "all", label: "All Media" },
     { value: "image", label: "Images" },
@@ -98,42 +106,50 @@ export default function MediaTab({ username }: { username: string }) {
       <AudioPlayerProvider>
         {isLoading ? (
           <div className="row gx-3 gy-3">
-            {Array.from({ length: 6 }).map((_, index) => (
+            {Array.from({ length: 12 }).map((_, index) => (
               <SkeletonCard key={index} />
             ))}
           </div>
         ) : (
           <>
             {showMasonryGrid && (
-              <MasonryGrid
-                gridRef={gridContainerRef}
-                onLayoutComplete={() => console.log("Layout complete!")}
-              >
-                {media.list.map((data: MediaFile, index: number) => {
-                  let card;
-                  switch (data.media_type) {
-                    case "audio":
-                      card = <AudioCard data={data} type="media" />;
-                      break;
-                    case "image":
-                      card = <ImageCard data={data} type="media" />;
-                      break;
-                    case "video":
-                      card = <VideoCard data={data} type="media" />;
-                      break;
-                    default:
-                      card = <div>Unsupported media type</div>;
-                  }
-                  return (
-                    <div
-                      key={index}
-                      className="col-12 col-sm-6 col-xl-4 grid-item"
-                    >
-                      {card}
-                    </div>
-                  );
-                })}
-              </MasonryGrid>
+              <>
+                {media.list.length === 0 && media.status === 3 ? (
+                  <div className="text-center mt-4 opacity-75">
+                    No media created yet.
+                  </div>
+                ) : (
+                  <MasonryGrid
+                    gridRef={gridContainerRef}
+                    onLayoutComplete={() => console.log("Layout complete!")}
+                  >
+                    {media.list.map((data: MediaFile, index: number) => {
+                      let card;
+                      switch (data.media_type) {
+                        case "audio":
+                          card = <AudioCard data={data} type="media" />;
+                          break;
+                        case "image":
+                          card = <ImageCard data={data} type="media" />;
+                          break;
+                        case "video":
+                          card = <VideoCard data={data} type="media" />;
+                          break;
+                        default:
+                          card = <div>Unsupported media type</div>;
+                      }
+                      return (
+                        <div
+                          key={index}
+                          className="col-12 col-sm-6 col-xl-4 grid-item"
+                        >
+                          {card}
+                        </div>
+                      );
+                    })}
+                  </MasonryGrid>
+                )}
+              </>
             )}
           </>
         )}
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
index 50a9fc2b0b..4a996cebe9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
@@ -6,12 +6,12 @@ import {
   faArrowDownWideShort,
   faFilter,
 } from "@fortawesome/pro-solid-svg-icons";
-import SkeletonCard from "components/common/Card/SkeletonCard";
 import Pagination from "components/common/Pagination";
 import { useListContent } from "hooks";
 import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
 import { TempSelect } from "components/common";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
+import SkeletonCard from "components/common/Card/SkeletonCard";
 
 // interface IWeighttModelData {
 //   token: string;
@@ -24,7 +24,7 @@ import { WeightCategory } from "@storyteller/components/src/api/_common/enums/We
 
 export default function WeightsTab({ username }: { username: string }) {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [sd, sdSet] = useState("all");
   const [tts, ttsSet] = useState("all");
   const [vc, vcSet] = useState("all");
@@ -40,6 +40,7 @@ export default function WeightsTab({ username }: { username: string }) {
     listSet,
     requestList: true,
     urlParam: username,
+    addQueries: { per_page: 24 },
   });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
@@ -81,7 +82,7 @@ export default function WeightsTab({ username }: { username: string }) {
     onPageChange: handlePageClick,
     pageCount: weights.pageCount,
     currentPage: weights.page,
-    addQueries: { per_page: 12 },
+    addQueries: { per_page: 24 },
   };
 
   const resetMasonryGrid = () => {
@@ -98,6 +99,14 @@ export default function WeightsTab({ username }: { username: string }) {
     resetMasonryGrid();
   };
 
+  useEffect(() => {
+    if (weights.status === 1) {
+      setIsLoading(true);
+    } else if (weights.status === 3) {
+      setIsLoading(false);
+    }
+  }, [weights.status]);
+
   return (
     <>
       <div className="d-flex flex-wrap gap-3 mb-3">
@@ -155,79 +164,87 @@ export default function WeightsTab({ username }: { username: string }) {
       </div>
       {isLoading ? (
         <div className="row gx-3 gy-3">
-          {Array.from({ length: 6 }).map((_, index) => (
+          {Array.from({ length: 12 }).map((_, index) => (
             <SkeletonCard key={index} />
           ))}
         </div>
       ) : (
         <>
           {showMasonryGrid && (
-            <MasonryGrid
-              gridRef={gridContainerRef}
-              onLayoutComplete={() => console.log("Layout complete!")}
-            >
-              {weights.list.map((data: any, index: number) => {
-                let card;
-                switch (data.weights_category) {
-                  case WeightCategory.TTS:
-                    card = (
-                      <AudioCard
+            <>
+              {weights.list.length === 0 && weights.status === 3 ? (
+                <div className="text-center mt-4 opacity-75">
+                  No weight created yet.
+                </div>
+              ) : (
+                <MasonryGrid
+                  gridRef={gridContainerRef}
+                  onLayoutComplete={() => console.log("Layout complete!")}
+                >
+                  {weights.list.map((data: any, index: number) => {
+                    let card;
+                    switch (data.weights_category) {
+                      case WeightCategory.TTS:
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                            showCover={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.VC:
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                            showCover={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.ZS:
+                        card = (
+                          <AudioCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                            showCover={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.SD:
+                        card = (
+                          <ImageCard
+                            key={index}
+                            data={data}
+                            type="weights"
+                            showCreator={true}
+                          />
+                        );
+                        break;
+                      case WeightCategory.VOCODER:
+                        card = <></>;
+                        break;
+                      default:
+                        card = <div>Unsupported weight type</div>;
+                    }
+                    return (
+                      <div
                         key={index}
-                        data={data}
-                        type="weights"
-                        showCreator={true}
-                        showCover={true}
-                      />
+                        className="col-12 col-sm-6 col-xl-4 grid-item"
+                      >
+                        {card}
+                      </div>
                     );
-                    break;
-                  case WeightCategory.VC:
-                    card = (
-                      <AudioCard
-                        key={index}
-                        data={data}
-                        type="weights"
-                        showCreator={true}
-                        showCover={true}
-                      />
-                    );
-                    break;
-                  case WeightCategory.ZS:
-                    card = (
-                      <AudioCard
-                        key={index}
-                        data={data}
-                        type="weights"
-                        showCreator={true}
-                        showCover={true}
-                      />
-                    );
-                    break;
-                  case WeightCategory.SD:
-                    card = (
-                      <ImageCard
-                        key={index}
-                        data={data}
-                        type="weights"
-                        showCreator={true}
-                      />
-                    );
-                    break;
-                  case WeightCategory.VOCODER:
-                    card = <></>;
-                    break;
-                  default:
-                    card = <div>Unsupported weight type</div>;
-                }
-                return (
-                  <div
-                    key={index}
-                    className="col-12 col-sm-6 col-xl-4 grid-item"
-                  >
-                    {card}
-                  </div>
-                );
-              })}
-            </MasonryGrid>
+                  })}
+                </MasonryGrid>
+              )}
+            </>
           )}
         </>
       )}