How to use isValidating in multiple SWR calls within a single component

[hughesthatgirl]

Issue: I have a dashboard component that shows open and completed orders. I have to call two different endpoints (one for getting the open orders and one for getting the completed orders). I would like to use isValidating to check the state of both API responses and show a loading animation in the UI for each section of the dashboard ifisValidating is true.

My question is, how do you use isValidating in multiple SWR calls within a single functional component?

What is shown below obviously does not work because you can't re-declare a const. I have not come across any examples in the SWR docs of using isValidating with multiple calls within the same component.

You can also see/answer this question on stack overflow: https://stackoverflow.com/questions/76886562/how-to-use-isvalidating-in-multiple-swr-calls-in-the-same-component

Any help would be greatly appreciated!

//Callout Component To Be Used In Dashboard With Prop for isValidating
export default function Callout({ message, isValidating = false }) {
    return (
        <div className='callout'>
            {isValidating ? (
                <Loader message={'Data Updating...'} />
            ) : (
                <div className='card__content'>
                    <p className='card__message'>{message}</p>
                </div>
            )}
        </div>
    );
}



   //Order Dashboard Component
import Callout from '../components/cards/Callout';

function OrdersDashboard() {
    const ordersEndpoint = `${BASE_URL}/orders`;
    const openOrdersEndpoint = `${ordersEndpoint}&completed=false`;
    const completedOrdersEndpoint = `${orderEndpoint}&completed=true`;

    //Endpoint #1
    const {
        data: openOrders,
        error: openOrdersError,
        isValidating,
    } = useSWR([openOrdersEndpoint, BASE_URL], ([url, audience]) =>
        fetchData(url, audience)
    );

    //Endpoint #2
    const {
        data: completedOrders,
        error: completedOrdersError,
        isValidating,
    } = useSWR([completedOrdersEndpoint, BASE_URL], ([url, audience]) =>
        fetchData(url, audience)
    );

    if (completedOrdersError || openOrdersError) {
        return <div>Error</div>;
    }

    if (!completedOrders && !openOrders) {
        return <div>Loading...</div>;
    }

    return (
        <>
            <h1>Orders Dashboard</h1>
            <section id='openOrders' className='section'>
                {!openOrders || !openOrders.length ? (
                    <>
                        <h2>Open Orders</h2>
                        <Callout
                            message='No Open Orders'
                            isValidating={isValidating}
                        />
                    </>
                ) : (
                    <DataTable columns={columns} data={openOrders} />
                )}
            </section>

            <section id='completedOrders' className='section'>
                {!completedOrders || !completedOrders.length ? (
                    <>
                        <h2>Completed Orders </h2>
                        <Callout
                            message='No Completed Orders'
                            isValidating={isValidating}
                        />
                    </>
                ) : (
                    <DataTable columns={columns} data={completedOrders} />
                )}
            </section>
        </>
    );
}