Defer showing page with streaming + client side navigation

[UROjQ6r80p]

Description

With streaming and client side navigation some frameworks like next.js allow to defer showing next page until its fully loaded if there is no <Suspense> in page component.

According to https://react.dev/reference/react/Suspense

Transitions mark the whole update as non-urgent so they are typically used by frameworks and router libraries for navigation

Suspense-enabled routers are expected to wrap the navigation updates into Transitions by default.

I don't really know whether this should be implemented on the internal route level, or rather as an extension e.g. vike-react or somehow implemented by user but I think it would be nice to have when using suspense based hooks instead of +data.js

Without streaming and with +data.js it is done by default, the next page is not shown until +data.js is finished (and we can use classic nprogress to display loading indicator on top of the page).

[brillout]

Indeed React has some neat transition APIs. Contribution welcome to experiment with these.

Moving to discussions because so far I don't see any blocker on Vike's side.

we can use classic nprogress to display loading indicator on top of the page

You can already do that with onPageTransition{Start,End}.

I don't really know whether this should be implemented on the internal route level, or rather as an extension e.g. vike-react or somehow implemented by user

We can start experimenting on the user land (e.g. on examples/react-full/) and if we're happy with our results we can add the improvements to vike-react.

On my side, I'm busy with highest-priority tickets while I don't see this as a top priority: I guess it's "only" a performance thing and not a blocker for users?

That said, I'm very much looking forward to further improve this.

[UROjQ6r80p]

You can already do that with onPageTransition{Start,End}.

I've used that with +data.js because then onTransitionEnd is waiting before data is finished, but with Suspense based hooks onTransitionEnd is instant in favor of showing fallback from <Suspense>

while I don't see this as a top priority: I guess it's "only" a performance thing and not a blocker for users?

Right, it's not top priority. I thought about it only from perspective of a UX/DX thing. For UX it's common pattern seen everywhere, youtube, github, Vike with +data.js etc. and for DX it's easier to just show current page with some small loading indicator on top like nprogress instead of creating tailored skeleton fallback for every page (while developer can create reusable fallback like loading spinner, in my opinion staying on current page seems better if we don't have time to create good skeletons for each page)

This has been discussed in other frameworks aswell, for example: remix-run/react-router#9850 (but different context though)

[brillout]

Agreed.

[brillout]

while developer can create reusable fallback like loading spinner, in my opinion staying on current page seems better if we don't have time to create good skeletons for each page

Especially this.

[brillout]

In the meantime using onPageTransition{Start,End} should work although it's blocking-ish.

[UROjQ6r80p]

I was able to achieve this effect with useTransition + startTransition (useDefferedValue works too, but with useTransition it's easier to apply something similar to onPageTransitionEnd with respect to Suspense).
Also with something like +loading.js meta setting it's possible to create skeleton/spinner on certain pages, and without it just stay on current page.
Next.js also have this sort of setting: https://nextjs.org/docs/app/api-reference/file-conventions/loading

    //+loading.js
    export default function Loading() {
      // Or a custom loading skeleton component
      return <p>Loading...</p>
    }

    export { PageShell }

    import React, { Suspense, useEffect, useTransition } from 'react'
    import PropTypes from 'prop-types'
    import { childrenPropType } from './PropTypeValues'
    import logoUrl from './logo.svg'
    import { PageContextProvider } from './usePageContext'
    import { Link } from './Link'
    import './css/index.css'
    import './PageShell.css'
    import { useState } from 'react';
    import NProgress from "nprogress";
    import 'nprogress/nprogress.css';

    PageShell.propTypes = {
        pageContext: PropTypes.any,
        children: childrenPropType
    }

    function PageShell(props) {
        const [stateProps, setStateProps] = useState(props);
        const {
            pageContext,
            children
        } = stateProps;

        const [isPending, startTransition] = useTransition();

        useEffect(() => {
            startTransition(() => {
                setStateProps(props);
            });
        }, [props]);

        useEffect(() => {
            if (!isPending) {
                NProgress.done();
            }
        }, [isPending]);

        const SuspenseWrapper = ({ children }) => {
            return (
                <Suspense
                fallback={loading?.()}
                >{children}</Suspense>
            )
        }

        const PassThrough = ({ children }) => {
            return (
                <>{children}</>
            )
        }

        const SuspenseConditional = loading ? SuspenseWrapper : PassThrough;

        return (
            <React.StrictMode>
                <PageContextProvider pageContext={pageContext}>
                    <Layout>
                        <Sidebar>
                            <Logo />
                            <Link href="/">Welcome</Link>
                            <Link href="/about">About</Link>
                            <Link href="/star-wars">Data Fetching</Link>
                        </Sidebar>
                        <SuspenseConditional>
                            <Content>
                                {children}
                            </Content>
                        </SuspenseConditional>
                    </Layout>
                </PageContextProvider>
            </React.StrictMode>
        )
    }

    Layout.propTypes = {
        children: childrenPropType
    }
    function Layout({ children }) {
        return (
            <div
                style={{
                    display: 'flex',
                    maxWidth: 900,
                    margin: 'auto'
                }}
            >
                {children}
            </div>
        )
    }

    Sidebar.propTypes = {
        children: childrenPropType
    }
    function Sidebar({ children }) {
        return (
            <div
                id="sidebar"
                style={{
                    padding: 20,
                    flexShrink: 0,
                    display: 'flex',
                    flexDirection: 'column',
                    lineHeight: '1.8em',
                    borderRight: '2px solid #eee'
                }}
            >
                {children}
            </div>
        )
    }

    Content.propTypes = {
        children: childrenPropType
    }
    function Content({ children }) {
        return (
            <div id="page-container">
                <div
                    id="page-content"
                    style={{
                        padding: 20,
                        paddingBottom: 50,
                        minHeight: '100vh'
                    }}
                >
                    {children}
                </div>
            </div>
        )
    }

    function Logo() {
        return (
            <div
                style={{
                    marginTop: 20,
                    marginBottom: 10
                }}
            >
                <a href="/">
                    <img src={logoUrl} height={64} width={64} alt="logo" />
                </a>
            </div>
        )
    }

I think in vike-react it could be possible to apply something similar here between Layout and Page or rather before PageContextProvider, not sure https://github.com/vikejs/vike-react/blob/main/packages/vike-react/src/renderer/getPageElement.tsx

I made it in old playground created from vike template (I don't remember which exactly) so it's not cleaned up and I shared just a snippet instead of repo.
But I think this snippet might be helpful in the future. I don't know of possible bugs except that without conditional suspense wrapper there will be error: This Suspense boundary received an update before it finished hydrating. if there is slow hook based on suspense and we navigate to the other page too fast. Conditional suspense wrapper get's rid of that.
I don't know if it's the best correct way but i'll just leave it here.

[brillout]

Thanks for circling back on this. I agree something like this should be built into vike-react; I created a feature request for it: vikejs/vike-react#117.

[brillout]

FYI this is the plan so far: vikejs/vike-react#117. You'll be able to opt-out from all defaults, so you can have a fully custom UX and preserve your current implementation.

We are currently working on +Loading.js.