How to make a fade-out animation with React router and React 18 transition

[poc7667]

• The scenario is to stay in the current component until next component's data is ready.

• All data-fetches are using react-query and encapsulate in each component, we don't want to move the data fetch logic outside of its component.

• By using suspense tag, we need to provide fallback view, our fallback view is current component plus loading spinner, which seems not possible unless we manually cache the current component DOM while doing the data-fetch for next component?

    ┌────────────────────────┐
    │Current component view  │
    └─┬──────────────────────┘
      │  route navigation triggered
      │
      │  start loading new  component data
      │
      │  all data fetch are encapulated in component
      ▼
    ┌─────────────────────────
    │Current component view Plus loading spinner
    └─┬───────────────────────
      │
      │new component data is ready
      │
      │
   ┌──▼───────────────────────┐
   │ Next component view      │
   └──────────────────────────┘

An expected behaviour is like below

fade-out-effect.mp4

<Routes>
        <Route element={<PageA/>} path={'pageA'} />
        <Route element={<PageB/>} path={'pageB'} />
</Routes>

pageA and pageB are encapusulating data-fetching logic in it place, should not spread data fetching to routes or parent components.
Inside pageA and pageB we use React query with suspense:true option to fetch data, which will throw pending promising when data is fetching