显示加载旋转器，直到组件完成渲染

Question

我有一个缓慢的渲染组件，我不希望能够显示加载旋转器，直到该组件已加载到DOM。

这个组件渲染缓慢的原因是微不足道的，它是一个可以有许多列表元素的长列表。(react window/virtualization不适用于此用例，分页也不适用于此用例)。

我已经尝试了悬念和延迟加载，虽然，只有在组件被导入后才开始渲染。我已经知道这不是延迟加载的目的。

理想情况下，我想立即开始渲染组件，但用display: none隐藏它。(我甚至不知道这是否可能，因为它必须挂载，以使这个css规则应用)。

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

谢谢，帮助是非常感激!

Answer 1

我认为您可以使用setState的三元操作符。默认状态应该是false，然后在需要加载的组件的componentDidMount或useEffect中，将setState设置为true。然后在html中实现基于该状态的三元操作符，当它为false时呈现加载器:

const [isLoaded, setIsLoaded] = useState<boolean>(false)

useEffect(() => { setIsLoaded(isLoaded => true) },[])

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