我正在尝试将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 />，一个用于动态导入（来自Suspense），另一个用于异步数据获取，尽管一次只显示其中一个。我意识到，如果更改悬念加载程序的样式，它们会在“加载”阶段的不同时间出现，直到组件列表最终完全呈现。

幕后发生的事情是什么，这是正确的方法吗（因为数据获取的暂记仍处于试验阶段）？