avoid showing old data whilst new progress data is loading

This commit is contained in:
Alex Bates 2021-03-04 12:39:42 +00:00
parent 7052cb5b08
commit 5fa0f88121
No known key found for this signature in database
GPG Key ID: 7531C5E1D6B1CA9A

View File

@ -48,18 +48,21 @@ async function fetchData(version) {
}
export default function ProgressPane({ captionPortal, nonce, color, version }) {
const [data, setData] = useState([])
const [data, setData] = useState()
const [dataVersion, setDataVersion] = useState()
useEffect(() => {
fetchData(version)
.then(data => {
setData(data)
setDataVersion(version)
})
}, [version])
const isDataValid = dataVersion === version
return <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
{data && <DataView data={data} nonce={nonce} captionPortal={captionPortal} color={color}/>}
{!data && "Loading..."}
{<DataView data={isDataValid ? data : []} nonce={nonce} captionPortal={captionPortal} color={color}/>}
</div>
}
@ -142,7 +145,7 @@ function DataView({ data, captionPortal, nonce, color }) {
</button>
</div>
{selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current)}
{data.length && selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current)}
</>
}