From b36b3963657f97f94df7ce26599bb1a05d875858 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 27 Dec 2023 02:35:10 +0700
Subject: [PATCH] changed loading skeleton to loading spinner

---
 .../src/v2/view/pages/explore/tabs/FeaturedTab.tsx     | 10 +++++-----
 .../src/v2/view/pages/explore/tabs/MediaTab.tsx        | 10 +++++-----
 .../src/v2/view/pages/explore/tabs/WeightsTab.tsx      | 10 +++++-----
 .../pages/profile/profile_view/tabs/BookmarksTab.tsx   | 10 +++++-----
 .../view/pages/profile/profile_view/tabs/MediaTab.tsx  | 10 +++++-----
 .../pages/profile/profile_view/tabs/WeightsTab.tsx     |  9 ++++-----
 6 files changed, 29 insertions(+), 30 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 d14c5f0885..a8ceff2f2d 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,7 +1,7 @@
 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";
+
 import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
@@ -42,10 +42,10 @@ export default function FeaturedTab() {
         </div>
 
         {isLoading ? (
-          <div className="row gx-3 gy-3 mt-1">
-            {Array.from({ length: 12 }).map((_, index) => (
-              <SkeletonCard key={index} />
-            ))}
+          <div className="mt-4 d-flex justify-content-center">
+            <div className="spinner-border text-light" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </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 137ad97373..f9e6c3c3c4 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
@@ -9,7 +9,7 @@ import {
   faFilter,
 } from "@fortawesome/pro-solid-svg-icons";
 import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
-import SkeletonCard from "components/common/Card/SkeletonCard";
+
 import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { useLazyLists } from "hooks";
@@ -85,10 +85,10 @@ export default function MediaTab() {
           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 className="mt-4 d-flex justify-content-center">
+              <div className="spinner-border text-light" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </div>
             </div>
           }
           endMessage={
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 052a42fd30..14435f9bc8 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
@@ -9,7 +9,7 @@ import {
   faFilter,
 } from "@fortawesome/pro-solid-svg-icons";
 import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
-import SkeletonCard from "components/common/Card/SkeletonCard";
+
 import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import InfiniteScroll from "react-infinite-scroll-component";
@@ -125,10 +125,10 @@ export default function WeightsTab() {
           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 className="mt-4 d-flex justify-content-center">
+              <div className="spinner-border text-light" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </div>
             </div>
           }
           endMessage={
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 6248ec3371..8bb9ee4fd8 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
@@ -3,7 +3,7 @@ import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
-import SkeletonCard from "components/common/Card/SkeletonCard";
+
 import Select from "components/common/Select";
 import {
   faArrowDownWideShort,
@@ -142,10 +142,10 @@ export default function BookmarksTab({ username }: { username: string }) {
         <Pagination {...paginationProps} />
       </div>
       {isLoading ? (
-        <div className="row gx-3 gy-3">
-          {Array.from({ length: 12 }).map((_, index) => (
-            <SkeletonCard key={index} />
-          ))}
+        <div className="mt-4 d-flex justify-content-center">
+          <div className="spinner-border text-light" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
         </div>
       ) : (
         <>
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 9276890242..7725fa2508 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
@@ -9,7 +9,7 @@ import {
   faFilter,
 } from "@fortawesome/pro-solid-svg-icons";
 import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
-import SkeletonCard from "components/common/Card/SkeletonCard";
+
 import Pagination from "components/common/Pagination";
 
 import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
@@ -105,10 +105,10 @@ export default function MediaTab({ username }: { username: string }) {
       </div>
       <AudioPlayerProvider>
         {isLoading ? (
-          <div className="row gx-3 gy-3">
-            {Array.from({ length: 12 }).map((_, index) => (
-              <SkeletonCard key={index} />
-            ))}
+          <div className="mt-4 d-flex justify-content-center">
+            <div className="spinner-border text-light" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </div>
           </div>
         ) : (
           <>
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 4a996cebe9..eeaf98a69a 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
@@ -11,7 +11,6 @@ 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;
@@ -163,10 +162,10 @@ export default function WeightsTab({ username }: { username: string }) {
         <Pagination {...paginationProps} />
       </div>
       {isLoading ? (
-        <div className="row gx-3 gy-3">
-          {Array.from({ length: 12 }).map((_, index) => (
-            <SkeletonCard key={index} />
-          ))}
+        <div className="mt-4 d-flex justify-content-center">
+          <div className="spinner-border text-light" role="status">
+            <span className="visually-hidden">Loading...</span>
+          </div>
         </div>
       ) : (
         <>