Help with Suspense and createResource

[rylofu]

Hi all! I am writing an online store and depending on the authentication state the cart can be stored either in localstorage or sent to the server. I have two implementations of the ICartStore interface: BackendCartStore and LocalStorageCartStore

I also have a Catalog component that needs cart information

export function Section() {
    const getCartStore = async (): Promise<ICartStore> => {
        let cartStore = LocalStorageCartStore
        if (!authState.isTokenSetted) {
            return cartStore
        }
        try {
            const cart = await getCart()
            cartStore = BackendCartStore(cart.data)
            return cartStore
        } catch (error: any | AxiosError) {
            if (error.isAxiosError) {
                switch (error.status) {
                    case 500:
                        throw new Error(INTERNAL_SERVER_ERROR_MESSAGE)
                    case 401:
                        console.log("auth_exception")
                }
            }
            return cartStore
        }
    }
    const [cartStore,] = createResource(getCartStore,)

    return <div class={styles["section__wrapper"]}>
        <Suspense fallback={<span>Загрузка...</span>}>
            <div class={styles["section"]}>
                <Header/>
                <div class={styles["section__cards-wrapper"]}>
                    {/*<Show when={cartStore.state === "ready"}>*/}
                    <For each={products()?.data?.products}>{(product) =>
                        <Card id={product.id}
                              title={product.name}
                              images={product.images}
                              price={product.price}
                              description={product.description}
                              quantity={product.quantity}
                              cartStore={cartStore()}
                        />
                    }
                    </For>
                    {/*</Show>*/}
                </div>
                <Pagination/>
            </div>
        </Suspense>
    </div>

}

I want to achieve a behavior where the page is loaded in parallel with the request to the server, putting as default LocalStorageCartStore, and then if BackendCartStore is loaded, swap one for the other. However, I can achieve this only with Show, essentially just stopping the thread and waiting for a response from the server, which slows down the application a lot. Otherwise I just get one of the storages with about 50/50 probability, which is then not updated in any way. I guess it depends on whether a response comes from the server while the components are rendering

I tried it:

1. use {initialState: LocalStorageCartStore} in createResource
2. wrapping the store in < Card cartStore={() => cartStore()} />
3. use const mergedProps = mergeProps({cartStore: LocalStorageCartStore}, props)

But none of this replaces LocalStorageCartStore with BackendCartStore when a response comes from the server. Is there any way to accomplish this at all, or am I obliged to use Show