在加载新数据之前显示旧数据的模式

Question

我有一个从api获取数据的模态，第一次一切都很好，然后当我关闭模态并打开它时，它首先显示加载进度的旧数据然后它更新了数据，我想只显示进度条而不显示旧数据然后当新数据准备好时，我显示它?

<CustomModal
open={Boolean(openModalState)}
onClose={onClose}
title="Sorting Log"
maxWidth="85%"
renderActionButton={
<ActionButton
label="Reload"
onClick={e => {
e.stopPropagation()
fetchData()
}}
/>
}
>
<div className={classes.logScreen}>
<LogsViewBody
loading={loading && !data}
loadMore={loading && Boolean(data)}
error={error}
>
<InfiniteLogs data={data} loadMore={loadMore} hasMore={hasMore} />
</LogsViewBody>
</div>
</CustomModal>

Answer 1

删除数据/设置为"等onClose吗?

或者我做过很多次的-使用三元->loading ? showLoading : showData

. .在JSX中，它可以写成:

loading ? <my-loading-component /> : <my-content-component />