Reactjs 使用转换延迟加载中断网格布局

我正在使用react grid layout（）和i18next set进行翻译（从后端按需加载）

我的布局包含可拖动的小部件。每个小部件都有相同的大小。我希望它是有反应的。用户可以拖动小部件，每个断点的位置（布局）存储在

localStorage

中

代码沙盒：

它工作得很好。在预览中-切换到响应预览并调整其大小。单击刷新图标-小部件将重新加载到以前的位置

然后打开占用率.tsx并取消注释第6行：

const { t } = useTranslation("dashboard");

这来自模块

i18next

。由于需要从文件

dashboard.json

加载新的翻译，它会延迟呈现。这就是为什么我在

App.tsc

中添加了

suspent

。刷新预览浏览器后，所有小部件都位于一列中。然后，当您将浏览器大小调整1px时，所有小部件都会返回到正确的位置

我怎样才能避免呢？或者有一种方法可以推迟RTL应用布局，直到加载翻译