Javascript 使用带有React的ChartJS时处理缓慢加载/渲染

我正在react应用程序中使用ChartJS（v2）。我正在尝试创建一个图表的页面报告，发现它们加载/呈现速度很慢

演示： 如果单击“图表报告”，它将加载下面的各种图表

我试着用悬念边界来包围图表，但似乎没有任何效果。另外，如果我对过滤器进行了更改，则重新呈现页面需要很长时间

当我有一个单独的图表（如“交互式”图表）时，加载/渲染速度要快得多，因此我认为最好的解决方案是按顺序加载每个报表图表。我只是不知道现在该怎么做

我的代码目前看起来像这样（我删除了一些simplicty代码）：

{arrayOfBarGraphs.map（eachObjOfTitles=>{
返回(
)
)}

---

有人能建议我需要介绍什么来处理点击“图表报告”按钮后页面冻结的几秒钟吗？

我发现我的代码中存在一些导致延迟的低效问题，因此我决定不再深入研究异步呈现/更新。对于任何感兴趣的人，我从一个几年前，丹·阿布拉莫夫（Dan Abramov）确实处理了我想要的东西，但不幸的是，这并没有真正解释他是如何实现的？本·阿瓦德（Ben Awad）在实验性的useTransition hook上有一个很好的视频，这也可能解决问题，但我不打算在我不需要的时候尝试。