mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
CE-793 - Add callback for going to slow-loading; call setters in constructor
This commit is contained in:
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
Reference in New Issue
Block a user