About

The WaitingLoading component is designed to provide a visual cue during data fetching or resource loading processes within web applications. It offers a responsive waiting/loading animation and is crafted to be easily integrated, allowing developers to enhance user experience by signalling ongoing activities. The component’s flexibility enables customization of appearance and behavior to align with the overall design and branding of the web application.

Main Components

1. WaitingLoading 

Input Parameters:

• IsActive: Easily manage the loading state by toggling the spinner on or off.
• LoadingPositionId: Position the loading spinner.
• ColorId: Customize the loading experience with the ‘Color’ input.
• OpacityId: Control the transparency of the loading spinner for subtle or prominent visual cues.

Auxiliary block: Loaders Block

1.1. Loaders Block

Designed for integration within the WaitingLoading block, the Loader block offers diverse Loader Types to choose from.

Input Parameter:

• LoaderTypeId: Choose from a variety of loader styles to complement your design, adding a touch of dynamism and engagement to the WaitingLoading block.

2. Spinner

Input Parameters:

• IsActive: Easily manage the loading state by toggling the spinner on or off.
• InfoText: Provide contextual information during loading states, offering users insights into ongoing processes.
• LoadingPositionId: Position the loading spinner.

3. Bars

Input Parameters:

• IsActive: Easily manage the loading state by toggling the bars on or off.
• InfoText: Provide contextual information during loading states, offering users insights into ongoing processes.

Instructions to use component

To use the WaitingLoading, Spinner, or Bars component, follow these instructions:

1. Add the component as a Dependency

Go to your Studio environment, click the manage dependencies button on the top menu, and add one of the reference blocks to your Reactive Web Application:

2. Drag the Block to a Screen

Drag one of the blocks to a screen, and insert it above the Layout. This applies to all 3 blocks (WaitingLoading, Spinner, and Bars)

3. Set Properties

Configure the properties of the block based on your requirements. Use LoaderType for varied loader styles, LoadingPosition to specify the position, Opacity for transparency control, and Color for personalized color (Color entity is from OutSystemsUI).

3.1 WaitingLoading:

Set the properties such as IsActive, LoadingPositionId, ColorId, and OpacityId according to your preferences.

3.1.1 Loaders:

When using WaitingLoading, to have the effect of the page loading, you should use the Loaders block.

• Drag the Loaders block onto your screen.
• Set the LoaderTypeId property to the desired loader style.
• Configure other properties as needed.

With Loaders, you can choose from 12 different Loader Types to customize the visual style of the loading indicators.

3.1.2 Show/Hide placeholders

For WaitingLoading, you can Hide placeholders so that you don’t have a block appearing all over the screen.

You can also use Show all placeholders, so you can edit the content of what will appear when the page is loading, configuring exactly how the screen appears to the end user.

3.2 Spinner:

Set the properties such as IsActive, LoadingPositionId, and InfoText.

3.3 Bars:

Set the properties such as IsActive and InfoText.

4. Bind IsActive Property to the Loading State

Set the IsDataFetched to IsActive property or create a boolean-type local variable (e.g., IsLoading) to manage the loading state. Bind the IsActive property of the WaitingLoading (or Spinner/Bars) block to the created variable (IsLoading). This binding dynamically controls the visibility of the loading spinner, effectively managing its activation or deactivation. 

WaitingLoading Customization

In the case of WaitingLoading, you have the flexibility to customize beyond the loaders. You can adjust the text sizes as you see fit, or even remove the loaders to incorporate your page-loading animation.

You can easily modify the content of the LoadingContent placeholder by selecting “Show all placeholders” and making the desired customizations within.

You can go even further by inserting elements like those from Lottie files, allowing for an even more customized animation.

If you’re unsure about how to insert a Lottie file, refer to the document “Lottie Animation on OutSystems” for comprehensive information on implementing it.