UI widget used to indicate progress to user.
Promise we want the loading screen to wait on.
OptionalconvertReasonToMessage: (reason: unknown) => stringIf promise fails, this method will be passed the promise's error reason. Whatever string it returns will be used as the error message.
If convertReasonToMessage is left empty and the promise's reason is non-empty, the error message will default to new String(reason) instead. If reason is empty, the error message will be "Error ⚠".
In the following example, the user is attempting to download data from a website and do something with it. This will open the loading screen and activate the spinner animation. If the promise returned by requestData is successful, it will simply turn off the loading screen.
If something goes terribly wrong, the loading screen will display an error message. However, user will not be given the option to try again.
Thanks to setting ErrorDialog.onCancel, it is possible for the user to give up.
//Import the modules we need.
import { LoadingScreen, awaitPromiseFunction } from "@crow281/light-loading-screen";
//Create the new loading screen.
const loadingScreen = new LoadingScreen();
//Configure the loading screen to make it cancellable.
//This is optional and is NOT configured by awaitPromise.
loadingScreen.errorDialog.onCancel = (): void => {
//Turn off loading screen
loadingScreen.visible = false;
}
//Function to download some data and do something with it.
//It will be called once while attempting to load.
//If the returned promise triggers an error, it will display the error
//and end there.
const requestData = (): Promise<void> => {
//Download data from some website.
const data: Response = await fetch("http://example.com");
//Do whatever you want with the data upon success.
console.log(data.status);
}
//Create the promise we will wait on.
const requestDataPromise = requestData();
//Activate the loading screen and wait for requestDataPromise to succeed.
awaitPromiseFunction(
loadingScreen,
requestDataPromise
);
Intended for operations that don't offer the user the chance to try again.
Sets the loading screen to animate until parameter promise completes.
If the promise is successful, the loading screen will then remove itself.
If the promise fails, it will display the error. Unless you set ErrorDialog.onTryAgain or ErrorDialog.onCancel yourself, the loading screen will stay there.