CE-793 - Add callback for going to slow-loading; call setters in constructor

This commit is contained in:
2024-01-29 19:54:49 -06:00
parent c5c756d84f
commit 5d479ad04a

View File

@ -41,17 +41,30 @@
** {myLoadingState.isNotLoading() && myData && <Box>... ** {myLoadingState.isNotLoading() && myData && <Box>...
** - In your template, before your "slow loading" view, check for `myLoadingState.isLoadingSlow()`, e.g. ** - In your template, before your "slow loading" view, check for `myLoadingState.isLoadingSlow()`, e.g.
** {myLoadingState.isLoadingSlow() && <Spinner />} ** {myLoadingState.isLoadingSlow() && <Spinner />}
**
** In addition, you can also supply a callback to run "upon slow" (e.g., when
** moving into the slow state).
*******************************************************************************/ *******************************************************************************/
export class LoadingState export class LoadingState
{ {
private state: "notLoading" | "loading" | "slow" private state: "notLoading" | "loading" | "slow"
private slowTimeout: any; private slowTimeout: any;
private forceUpdate: () => void private forceUpdate: () => void;
private uponSlowCallback: () => void;
constructor(forceUpdate: () => void, initialState: "notLoading" | "loading" | "slow" = "notLoading") constructor(forceUpdate: () => void, initialState: "notLoading" | "loading" | "slow" = "notLoading")
{ {
this.forceUpdate = forceUpdate; this.forceUpdate = forceUpdate;
this.state = initialState; this.state = initialState;
if(initialState == "loading")
{
this.setLoading();
}
else if(initialState == "notLoading")
{
this.setNotLoading();
}
} }
public setLoading() public setLoading()
@ -60,6 +73,12 @@ export class LoadingState
this.slowTimeout = setTimeout(() => this.slowTimeout = setTimeout(() =>
{ {
this.state = "slow"; this.state = "slow";
if(this.uponSlowCallback)
{
this.uponSlowCallback();
}
this.forceUpdate(); this.forceUpdate();
}, 1000); }, 1000);
} }
@ -85,4 +104,14 @@ export class LoadingState
return (this.state == "notLoading"); return (this.state == "notLoading");
} }
public getState(): string
{
return (this.state);
}
public setUponSlowCallback(value: any)
{
this.uponSlowCallback = value;
}
} }