UI widget used to indicate progress to user.
Elements to remove from their parents when loading screen is visible. When loading screen is no longer visible, they will be appended back to their parents.
The listener this added to loadingScreen. Allows you to remove it if so desired.
//Import the modules we need.
import { LoadingScreen, awaitPromiseFunction } from "@crow281/light-loading-screen";
//Create the new loading screen.
const loadingScreen = new LoadingScreen();
//Fetch App root.
const root = document.findElementById("root");
//Set the loading screen to disable the root DOM element until it is finished.
//LoadingScreen is primarily intended for app initialization,
//but in the event you do want to use it for more, this utility makes
//it easier to ensure the rest of the UI doesn't interfere with
//the loading screen.
swapElementsOnVisibleChange(loadingScreen, root);
//Function to load the next menu.
//It will be called once while attempting to load.
//If the returned promise triggers an error, it will offer the
//user the chance to call it again via the try again button.
const importMenuModule = (): Promise<any> => {
//Use dynamic import to load a desired module.
return import("./NextMenu");
}
//Activate the loading screen and wait for importMenuModule to succeed.
//User can keep trying again until it succeeds,
//but cancelling has not been enabled.
awaitPromiseFunction(
loadingScreen,
importMenuModule
);
When loading screen is visible, the items in parameter elements will be removed from their parents. When loading screen is no longer visible, they will be added back to their parents.
You would generally use this if you still want to continue using LoadingScreen after your app has been initialized and need to ensure the rest of your UI does not interfere.