daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-05 17:58:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

loading skeleton for all tabs

Browse Source
This commit is contained in:
BFlat committed 2023-12-27 02:18:10 +07:00
1 parent 6eff57f2a8
commit eda49fb8bd
6 files changed
+397 -331
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
+44 -28
View File
@@ -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>
packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
+76 -77
View File
@@ -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>
</>
);
packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
+92 -93
View File
@@ -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>
</>
);
packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+50 -31
View File
@@ -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">
packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+49 -33
View File
@@ -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>
)}
</>
)}
</>
)}
packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
+86 -69
View File
@@ -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>
)}
</>
)}
</>
)}