显示加载微调器，直到组件完成渲染

Question

我有一个缓慢的渲染组件，在该组件安装到 DOM 之前，我无法显示加载微调器。

这个组件渲染速度慢的原因是微不足道的，它是一个很长的列表，可以有很多列表元素。 （反应窗口/虚拟化不适用于这个用例，也不会分页）。

不过，我尝试过 Suspense 和延迟加载，只有在导入组件后才开始渲染。 我了解到这不是延迟加载的目的。

理想情况下，我想立即开始渲染组件，但使用display: none隐藏它。 （我什至不知道这是否可能，因为必须安装它才能应用此 css 规则）。

这是我的缓慢渲染组件的限制还是有可能的解决方案？

谢谢，非常感谢您的帮助！

Answer 1

我认为您可以将三元运算符与 setState 一起使用。 默认 state 应该是 false，然后在需要加载的 Component 的 componentDidMount 或 useEffect 中， setState 为 true。 然后在 html 中实现基于该状态的三元运算符，当它为假时呈现加载器：

   const [isLoaded, setIsLoaded] = useState<boolean>(false)
   
   useEffect(() => { setIsLoaded(isLoaded => true) },[])


    {
     isLoaded ?
     <TheComponent />
     :  
     <div> Spinner </div>
    }