setFetching
- Updated:
Toggles a spinner at the module/iframe level.
Description
Toggles a loading spinner at the module/iframe level by hiding the iframe in favor of rendering a q2-loading instance.
The loading spinner is automatically enabled while a module loads and boots into a Tecton outlet. Apps should call setFetching(false) once booted with sufficient data to present to the user.
While primarily used to provide immediate visual feedback during module loading, setFetching can toggle the spinner on and off at any time during the module's lifecycle.
Signature
tecton.actions.setFetching(fetching?: boolean | LoadingOptions): void;export interface LoadingOptions {
outlet?: {
classList?: string[];
style?: string;
};
loaders: Loader[];
}export interface Loader {
type: string;
shape: string;
row: number;
classList?: string[];
style?: string;
modifiers?: string;
counts?: string;
ariaLabel?: string;
}Usage
Show loading state before fetching data.
tecton.actions.setFetching(true);
const data = await fetchAccountData();Hide loading state when done.
tecton.actions.setFetching(false);Show custom loading message
tecton.actions.setFetching({ message: 'Processing your request...' });Additional Information
When using the setFetching action, there are important details to keep in mind.
Module Height
When the loading spinner is active, the module's content area will be the minimum configured size. Tecton outlet height is otherwise determined by the content inside it, with a minimum height from the outlet's configuration.
Example
In this example, the setFetching method is first provided a true value. Then, after a one second delay, the setFetching method is provided a false value. While setFetching is active (true), a loading spinner will appear near the top-center of the page while the rest of the page content is hidden.
Captured on UUX version 4.6.0.10A.
Parameters
fetching