Реагировать на отложенную загрузку / приостановку для компонентов с загрузкой данных

Question

Я пытаюсь применить React lazy / Suspense к компоненту, например, с 4 дочерними компонентами. Текущая настройка такова, что при монтировании компонента вызывается запрос graphQL, который отвечает со всеми данными, необходимыми для рендеринга дочерних компонентов. Следовательно, у меня есть обычная настройка, пока данные все еще загружаются:

return (
    {!loading && (
        <>
            <Component1 {...someProps} />
            <Component2 {...someProps} />
            <Component3 {...someProps} />
            <Component4 {...someProps} />
        </>
    )}
    
    {loading && <Loading />}
)

Теперь я хотел бы применить React lazy / Suspense к этому же компоненту, и вот как я это делал до сих пор:

const Component1 = lazy(() => import("./path..."));
const Component2 = lazy(() => import("./path..."));
const Component3 = lazy(() => import("./path..."));
const Component4 = lazy(() => import("./path..."));

...

return (
    <Suspense fallback={<Loading />}>
    {!loading && (
        <>
            <Component1 {...someProps} />
            <Component2 {...someProps} />
            <Component3 {...someProps} />
            <Component4 {...someProps} />
        </>
    )}
    
    {loading && <Loading />}
    </Suspense>
)

Проблема в том, что сейчас 2 <Loading />, один для динамического импорта (из приостановки) и один для асинхронной выборки данных, хотя одновременно отображается только один из них. Я понял, что если я изменю стиль загрузчика саспенса, они будут отображаться в разное время на этапе "загрузки", пока список компонентов, наконец, не отобразится полностью.

Что происходит за кулисами, и правильный ли это способ сделать это (поскольку приостановка для выборки данных все еще экспериментальная)?