Problem
useWorldHeritageDetail initializes state as { data: null, loading: false, error: null }.
On the first render, before useEffect fires load(), the container evaluates:
isLoading → false
isError → false
!item → true → renders "Not found."
Then useEffect runs, sets loading: true, and the spinner appears. This causes a visible flash of the not-found state on every page load.
Root cause
useState initial value in use-world-heritage-detail.ts:
loading: false // should be: loading: id != null
Fix
Change the initial state to loading: id != null so the first render already reflects that a fetch is in flight when an id is present.
Problem
useWorldHeritageDetailinitializes state as{ data: null, loading: false, error: null }.On the first render, before
useEffectfiresload(), the container evaluates:isLoading→ falseisError→ false!item→ true → renders "Not found."Then
useEffectruns, setsloading: true, and the spinner appears. This causes a visible flash of the not-found state on every page load.Root cause
useStateinitial value inuse-world-heritage-detail.ts:Fix
Change the initial state to
loading: id != nullso the first render already reflects that a fetch is in flight when anidis present.