diff --git a/web/DatabaseBlock.tsx b/web/DatabaseBlock.tsx index 1d9f116..f2989fd 100644 --- a/web/DatabaseBlock.tsx +++ b/web/DatabaseBlock.tsx @@ -88,7 +88,9 @@ export const DatabaseBlock = () => { `BackupsRow` actually know. See RootLocationBlock for why both sources are needed. */ const [summaryReady, setSummaryReady] = useState(null); - const [backupsReady, setBackupsReady] = useState(false); + /* null until BackupsRow has actually answered. `false` would be a REPORT of not-ready, and using + it before the answer exists is what made this block paint open and then shut. */ + const [backupsReady, setBackupsReady] = useState(null); const [collapsed, setCollapsed] = useState(null); useEffect(() => { @@ -276,7 +278,16 @@ export const DatabaseBlock = () => { (status.development.tables ?? 0) > 0 && backupsReady, ); - const settledNow = status ? live : summaryReady === true; + + /* + The summary until EVERY local part has answered, then the live value. + + Both conditions, not either. Switching as soon as `status` arrived meant using `backupsReady` while + it was still its initial value — an answer nobody had given — so the block decided it was unfinished + and opened, and shut again a moment later when the real answer came. + */ + const answered = status !== null && backupsReady !== null; + const settledNow = answered ? live : summaryReady === true; useEffect(() => { setCollapsed((chosen) => { @@ -308,7 +319,7 @@ export const DatabaseBlock = () => { ) : undefined } > - {!status ? null : settled ? ( + {summaryReady === null || !status ? null : settledNow ? ( <> {row('Production', 'production', status.production)} {row('Development', 'development', status.development)}