Arkie-Library-Frontend/.unipi/docs/fix/2026-06-04-favorites-display-loading-fix.md

title, type, date

title	type	date
Favorites Display Loading Blank Page — Quick Fix	quick-fix	2026-06-04

Favorites Display Loading Blank Page — Quick Fix

Bug

When clicking the desktop header “我的收藏” button, the favorites page could briefly show the no-favorites empty state and then appear blank. The correct behavior is to show the user's favorited posts after loading.

Root Cause

Two issues combined:

1. The favorites page initialized with loading=false and items=[]. When the wallet was already logged in, React rendered the empty state once before the useEffect started the favorites request.
2. The desktop header favorites link had been changed to reloadDocument as a previous workaround. In the local Vite/dev-browser state this could force a full document reload and land in a broken empty document state instead of keeping the React app mounted.

Fix

• Added an explicit loaded state to src/pages/Favorites/index.tsx.
• The favorites page now shows loading skeletons while logged-in favorites have not completed their first load, so the empty state only appears after a completed request returns zero items.
• Added a loading UI for wallet.status === "loading" so a persisted wallet token does not briefly show the logged-out prompt.
• Removed reloadDocument from the desktop header favorites link and kept client-side navigation with a top scroll reset.

Files Modified

• src/pages/Favorites/index.tsx — tracks loaded state and gates empty-state rendering until favorites data has loaded.
• src/layouts/PublicLayout.tsx — removes hard document reload from the desktop header favorites link.

Verification

• npx tsc --noEmit
• npm run format:check
• npm test
• Browser native: opened http://192.168.1.187:5173/cn/browse, clicked the desktop header “我的收藏”, and verified the resulting page URL is /cn/favorites, document.getElementById("root") exists, and window.scrollY === 0.

Notes

No deploy was performed.