changed loading skeleton to loading spinner

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>
         ) : (
           <>

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={

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={

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>
       ) : (
         <>

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>
         ) : (
           <>

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>
       ) : (
         <>