fix: stabilize favorites page loading

This commit is contained in:
TerryM
2026-06-04 17:15:14 +08:00
parent efaf92c4e4
commit 6471559b3b
3 changed files with 58 additions and 2 deletions

View File

@@ -698,7 +698,6 @@ export function PublicLayout() {
/>
<Link
to={lp("/favorites")}
reloadDocument
onClick={() => window.scrollTo({ top: 0, left: 0 })}
className={`hidden h-10 shrink-0 items-center justify-center gap-2 rounded-full border px-3 text-sm font-bold outline-none transition focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:inline-flex ${
na("favorites")

View File

@@ -137,6 +137,7 @@ export default function Favorites() {
const [items, setItems] = useState<Resource[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [loaded, setLoaded] = useState(false);
const [error, setError] = useState("");
const [reloadKey, setReloadKey] = useState(0);
const [showFilters, setShowFilters] = useState(false);
@@ -151,10 +152,13 @@ export default function Favorites() {
if (!wallet.token || wallet.status !== "loggedIn") {
setItems([]);
setTotal(0);
setLoading(false);
setLoaded(false);
return;
}
let cancelled = false;
setLoading(true);
setLoaded(false);
setError("");
listFavorites(wallet.token, {
sort,
@@ -170,6 +174,7 @@ export default function Favorites() {
setItems(resources);
setTotal(data.total ?? resources.length);
resources.forEach((resource) => markFavorite(resource.id, true));
setLoaded(true);
})
.catch((err) => {
if (cancelled) return;
@@ -179,6 +184,7 @@ export default function Favorites() {
return;
}
setError(err instanceof Error ? err.message : t("loadFailed"));
setLoaded(true);
})
.finally(() => {
if (!cancelled) setLoading(false);
@@ -200,6 +206,16 @@ export default function Favorites() {
[t],
);
if (wallet.status === "loading") {
return (
<Reveal className="mx-auto grid max-w-[980px] gap-3 px-0 py-2 md:py-4">
{Array.from({ length: 4 }).map((_, index) => (
<Skeleton key={index} className="h-[132px] rounded-2xl" />
))}
</Reveal>
);
}
if (wallet.status !== "loggedIn") {
return (
<Reveal className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 py-12 text-center">
@@ -330,7 +346,7 @@ export default function Favorites() {
) : null}
</div>
{loading ? (
{loading || !loaded ? (
<div className="grid gap-3">
{Array.from({ length: 4 }).map((_, index) => (
<Skeleton key={index} className="h-[132px] rounded-2xl" />