diff --git a/src/qqq/models/LoadingState.ts b/src/qqq/models/LoadingState.ts index 39d7d27..992d349 100644 --- a/src/qqq/models/LoadingState.ts +++ b/src/qqq/models/LoadingState.ts @@ -41,17 +41,30 @@ ** {myLoadingState.isNotLoading() && myData && ... ** - In your template, before your "slow loading" view, check for `myLoadingState.isLoadingSlow()`, e.g. ** {myLoadingState.isLoadingSlow() && } + ** + ** In addition, you can also supply a callback to run "upon slow" (e.g., when + ** moving into the slow state). *******************************************************************************/ export class LoadingState { private state: "notLoading" | "loading" | "slow" private slowTimeout: any; - private forceUpdate: () => void + private forceUpdate: () => void; + private uponSlowCallback: () => void; constructor(forceUpdate: () => void, initialState: "notLoading" | "loading" | "slow" = "notLoading") { this.forceUpdate = forceUpdate; this.state = initialState; + + if(initialState == "loading") + { + this.setLoading(); + } + else if(initialState == "notLoading") + { + this.setNotLoading(); + } } public setLoading() @@ -60,6 +73,12 @@ export class LoadingState this.slowTimeout = setTimeout(() => { this.state = "slow"; + + if(this.uponSlowCallback) + { + this.uponSlowCallback(); + } + this.forceUpdate(); }, 1000); } @@ -85,4 +104,14 @@ export class LoadingState return (this.state == "notLoading"); } + public getState(): string + { + return (this.state); + } + + public setUponSlowCallback(value: any) + { + this.uponSlowCallback = value; + } + } \ No newline at end of file