fix: stabilize favorites page loading
This commit is contained in:
41
.unipi/docs/fix/2026-06-04-favorites-display-loading-fix.md
Normal file
41
.unipi/docs/fix/2026-06-04-favorites-display-loading-fix.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: "Favorites Display Loading Blank Page — Quick Fix"
|
||||
type: quick-fix
|
||||
date: 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.
|
||||
Reference in New Issue
Block a user