How to hide page content before javascript execution, hydration and on_load event

[PasqualePuzio]

Hi,

right now, the frontend code of our application is structured like this:

  rx.cond(AppState.is_hydrated,
    component(),
    loading_spinner(),
  )

Also, for each page we have defined an on_load event which fetches some remote content and updates the state accordingly.

What's happening is that when we navigate from one page to another, first the page is immediately displayed without any loading spinner using the previous state, then after 1-2 seconds the javascript is fetched and executed (I guess), the loading spinner is displayed for a little while and finally the page is displayed again with the new updated state.

The app works just fine but this kind of flickering effect is a bit annoying.

Of course we could just remove the condition and remove the flickering effect too, but what we're trying to achieve is that the page shouldn't be interactive (or displayed at all) until we have fetched content in the on_load event.

How can we achieve that?

Thanks

[PasqualePuzio]

We have found a way to slightly mitigate this "issue" and lower the delay between the page load and the display of the loading spinner.
However it looks a bit hacky to me and I'm sure there must be a better way:

`class DebugMiddleware(rx.Middleware):

async def preprocess(self, app, state, event):
    print('preprocess: '+event.name)
    if event.name == 'state.update_vars_internal':
        from reflex.utils import format
        setattr(state, 'is_hydrated', False)
        delta = format.format_state(state.dict())
        state._clean()
        return rx.state.StateUpdate(delta=delta, events=[])

    return None

async def postprocess(self, app, state, event, update):
    print('postprocess: '+event.name)
    return update

app.add_middleware(DebugMiddleware())`

state.update_vars_internal is the first event that is fired every time we load a new page.

We have also thought of an alternative solution (which is yet to be tested).
We may include an element to the content of each page and add an event handler for the on_umount event.
The event handler would then set a flag to false when the element is unmounted and the flag would be set to true when the page is loaded.
Then we would change the condition and show the loading spinner only when that flag is set to false.

[masenf]

Interesting. Reflex calls the (relatively) new on_load_internal event when routeChangeComplete occurs which sets is_hydrated=False. However, this happens after the page navigation. After setting is_hydrated=False, it then attempts to call all of the on_load events for the page that was navigated to, and then sets is_hydrated=True.

I don't think there's a way to solve this in reflex currently. It seems like something that we'll have to address within the framework itself.

reflex/reflex/.templates/web/utils/state.js

Lines 647 to 654 in f39c138

	// Route after the initial page hydration.
	useEffect(() => {
	const change_complete = () => addEvents(onLoadInternalEvent());
	router.events.on("routeChangeComplete", change_complete);
	return () => {
	router.events.off("routeChangeComplete", change_complete);
	};
	}, [router]);

I think Reflex needs to set is_hydrated=false here on the frontend on routeChangeStart, without waiting for an async round trip to the backend to set this flag.

Something like

  // Route after the initial page hydration.
  useEffect(() => {
    const change_start = () => dispatch["state"]({is_hydrated": false})
    const change_complete = () => addEvents(onLoadInternalEvent());
    router.events.on("routeChangeStart", change_start);
    router.events.on("routeChangeComplete", change_complete);
    return () => {
      router.events.off("routeChangeStart", change_start);
      router.events.off("routeChangeComplete", change_complete);
    };
  }, [router]);

I haven't tested it yet, but dropping here so i don't lose this thought.

[PasqualePuzio]

Yes probably that would be the ideal solution, definitely less hacky than ours 😂

I think the solution you proposed is also the most correct one. If there's a condition on the frontend based on is_hydrated then I would expect is_hydrated to be set to false as soon as we navigate to a new page, without any additional delay.

The app works well and it's pretty fast but that flickering effect when the route changes is a bit ugly.

[charlestondance]

I agree - the flickering effect looks pretty bad and should probably be adressed in the framework if it can. Im not sure 'real' react websites suffer from this issue and it makes reflex apps behave in an odd way.

[scottpersinger]

Related to this, I only today realized that even if you guard a page with that rx.cond(is_logged_in) block, that only applies to the page contents. The page on_load handler is still called and you need to check the logged in state there as well. As a general statement I'd say it would be great if Reflex could get more first class support for "user logged in/not logged in" since it's such a core pattern.

[picklelo]

Agreed - we're looking into some ways to offload the rendering until runtime. Currently the entire frontend is compiled up front, but we want to add ways to dynamically render UI at runtime that wasn't included in the initial bundle.