[Bug]: the initial data will flash on the screen first for a split second before the cache is properly loaded into the component

[vlaem]

Is this a Bug?

• I have confirmed that I want to report a Bug

Has this issue been reported before?

• I have confirmed that this Issue has not been reported before

Alova Version

3.2.3

Framework

React

Problem Description

When using useRequest with immediate true and initial data, if the resource was previously loaded and we have data on the cache, the initial data will flash on the screen first for a split second before the cache is properly loaded into the component. Note that due to data being found on the cache. The loading state is also false during this whole process.

Screencast.from.2024-11-23.20-32-32.webm

The initial data is shown for a small time, breaking the layout.

Expected Behavior

When using useRequest with immediate true and initial data, if the resource was previously loaded and we have data on the cache, the initial data should be replaced by the cached data on initialization of the useRequest call

Reproduction Link

No response

Reproduction Steps

1. Have a page that calls a resource setup with alova.Get, a any positive cacheTime, initialData and immediate:true

const { loading, data } = useRequest(getWebflowCollectionsItems, {
    initialData() {
      const resources = []
      for (let i = 0; i < 12; i++) {
        resources.push({
          id: i,
          slug: 'dummy-data',
          title: 'Dummy Title',
          body: '<h1 id="">Best Ways To Tap Your Home Equity</h1>',
          mainImage: 'https://source.unsplash.com/random',
          thumbnailImage: 'https://source.unsplash.com/random',
        })
      }
      return resources
    },
    immediate: true,
  })

2. Load the page, render the endpoint data into the page, then navigate away, when navigating back, the state of the page will show the dummy data for a small fraction of time before loading the cache data to the state

System Information

No response

Additional Information

I downloaded the source code and I think i got a solution for this already, with updated unit tests. This of course may not be the correct approach, but I think the tests will illustrate the error.

main...vlaem:alova:replace-initial-data-with-cache-when-hit

[MeetinaXD]

We have noticed this issue and currently we are discussing whether it is a bug.

[vlaem]

Great, thanks for taking time looking into it.

One more thing, if this IS the expected behavior, then the loading state should start as true when there is a cache hit on initialization as to allow us developers to hide the data with our custom loading state.

In the video I actually have setup skeleton loaders on top of the cards generated by the dummy data, but when navigating back to the page the loading state stays as false and the dummy data is shown for a bit. Either have it start with the cache data or start with loading = true until the cache is loaded would be good options imo.

Currently as a workaround i call the send function at the start with useEffect which is fast enough pretty much skip having the initial data on the state (at least for my usecase)