Can I add "loading" state to a component until data is ready in loader() function

[laurencefass]

I'm using the following code to create a /products page. I have introduced a delay into the loader and I was hoping to render the component with a "loading" message until the data was ready. Running this code delays render of the whole component under the data is returned form the loader. Can i load the products page with a "loading" state until the data is ready, and then display the data?

import type { LoaderFunction } from "@remix-run/node"; // or "@remix-run/cloudflare"
import { json } from "@remix-run/node"; // or "@remix-run/cloudflare"
import { useLoaderData, useTransition } from "@remix-run/react";
import { resolve } from "path";
import { useState, useEffect } from "react";

type Product = {
    id: string;
    name: string;
}

const resolvePromise = async (ms: number) => {
    return new Promise(function(resolve, reject) {
        setTimeout(()=>{
            resolve(
                [
                    { id: "1", name: "Pants" },
                    { id: "2", name: "Jacket" },
                    { id: "3", name: "Socks" }
                ]
            );    
        }, ms)
    });
}

// this loaderfunction doesnt resolve for 5 seconds simulating a very slow network connection!
export const loader: LoaderFunction = async () => {
    console.log("loader started");
    return resolvePromise(5000);
}

// also tried this but doesnt work
// 
// const sleep = (milliseconds: number) => {
//     return new Promise(resolve => setTimeout(resolve, milliseconds))
// }

// export const loader: LoaderFunction = async () => {
//     await sleep(2000);
//     return json([
//         { id: "1", name: "Pants" },
//         { id: "2", name: "Jacket" },
//     ]);
// };

export default function Products() {
    const products = useLoaderData();
    const transition = useTransition();

    useEffect(() => {
        console.log("transition", transition);
    }, [transition]);

    useEffect(() => {
        console.log("products", products);
    }, [products]);

    return (
        <div>
            <h1>Products-{Math.random()}</h1>
            <hr />
            {!products && <div>loading...</div>}
            {products && products.map((product: Product) => (
                <div key={product.name}>{product.name}-{Math.random()}</div>
            ))}
        </div>
    );
}

[sergiodxa]

You can use the useTransition hook to know when a transition is happening, but that's only going to work for client-side navigation, for the initial document request (when the user get HTML) there's now way because the user didn't loaded anything yet.

If you want to do it on the initial document request you can switch to useFetcher to fetch the data client-side, on SSR you will send a loading state and then once JS loaded fetch the data, but I don't really recommend you to do that for everything, specially on a list of products you should render HTML with content so it can be indexed.

[laurencefass]

Thanks for your opinion. I coming from NextJS which has the same limitation. I definitely dont want to switch to useFetcher because then I am back to client side rendering, which has its own limitations.

I am not sure if the synchronous nature of loading is a feature, a limitation, a bug or a design decision. The LoaderFunction is async so it can return a promise, but it appears that the useLoaderData does not process as a promise and it prevents rendering of the entire component while waiting for data. This could work if useLoaderData returned a promise, not the data, then it would be possible to continue rendering the rest of the component and display a loading skeleton whilst waiting for data.

Is this something that is roadmapped for Remix in the future. It certainly would be a great feature and give Remix another advantage over Next, which I believe has no roadmap for truly asynchronous data loading.

[sergiodxa]

useLoaderData doesn't return a promise because that hook only read from a context and it doesn't fetch the data.

Remember LoaderFunction is called completely server-side and for the initial document request the flow is something like this

1. Receive requests
2. Check what routes match the URL
3. Call the loader of each of these routes at the same time
4. Render the app to HTML server-side using the data previously fetched

In the future there'll be a way to defer part of the data (see #2708), this will allow your loader to await for important and blocking data and let the rest be streamed as it comes, an example of this is loading the comments of a post, the post data is required to even know the status code of the response, but the comments are not and can be deferred to load later.

What's important to understand is that useLoaderData doesn't fetch data by itself, so it can't return the promise, it just returns a value from a context. Even on a client-side navigation it will still do that, Remix fetch the data outside the lifecycle of React.

[laurencefass]

For furthering (my own) understanding, when you said:

"for the initial document request (when the user get HTML) there's now way because the user didn't loaded anything yet."

given that the LoaderFunction is async and can return a promise, useLoaderData has the potential to process the promise if Remix could transfer the promise resolution across the network.

[laurencefass]

Thanks for your advice. For further clarity and understanding:

• Does this mean that there is no way presently to add first-load/pending state to components loaded through LoaderFunctions?
• Are we waiting on streaming advancements and a new API to achieve this?
• Do we still need to use SPA-style client-side fetch to display component loading states?

[kiliman]

As @sergiodxa mentioned Remix will support deferred streaming in the near future. It’s currently in preview.

 return deferred({
   fastData: await fastData(), // wait for this data before render
   slowData: slowDataPromise // but return promise here and stream results to client
})

For now if you have loaders that return slow data then you’ll need to fetch that client side. Then you can use fetcher.state for loading states.

So yes it is a limitation in current Remix but not for much longer.