Steps to create a personalized loading screen using Angular

Question

Steps to create a personalized loading screen using Angular

I am looking to enhance the loading screen for our angular 9 application. Currently, we are utilizing

<div [ngClass]="isLoading ? 'loading' : ''>

in each component along with the isloading: boolean variable.

Whenever an API call is made, we switch the value of this variable to true which triggers a spinning wheel to appear, freezing the app until the API call completes. Once finished, we set back the value to false and display the content to the user.

I am interested in creating a customized loading screen to provide additional information. Does anyone have any suggestions or solutions for implementing this?

angular typescript

Answer 1

Answer №1

Show a loading spinner using the ngx-spinner library when making calls to a back end service:

Here is an example:

Prior to making the back end call, include this line of code:

this.spinner.show();

In your template, you can add the following:

<ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium" bdColor="rgba(32, 55, 77, 0.85)">
  <p class="loading" ><Strong>Please wait ...</Strong></p>
</ngx-spinner>

Once the service returns results, use this code:

this.spinner.hide();

Take a look at this demo: https://example.com/demo123

For more information, visit: https://example.com/ngx-spinner-demo

Answer 2

Show a loading spinner using the ngx-spinner library when making calls to a back end service:

Here is an example:

Prior to making the back end call, include this line of code:

this.spinner.show();

In your template, you can add the following:

<ngx-spinner [fullScreen]="true" type="ball-clip-rotate-multiple" size="medium" bdColor="rgba(32, 55, 77, 0.85)">
  <p class="loading" ><Strong>Please wait ...</Strong></p>
</ngx-spinner>

Once the service returns results, use this code:

this.spinner.hide();

Take a look at this demo: https://example.com/demo123

For more information, visit: https://example.com/ngx-spinner-demo

Answer 3

Answer №2

When developing my applications, I always make sure to include a loading state component. It's important to cover all aspects of UI components, including:

blank state (Content is loaded but empty, such as an empty list)
loading state (Content is still loading)
partial state (Certain parts of the view are not yet complete or working on certain elements, like a long list with few entries)
error state (Something has gone wrong and cannot be recovered)
ideal state (Perfect scenario where content is available and well-structured)

In my approach, I create components specifically for error, loading, and blank states, while incorporating ideal and partial states into other components. By providing inputs, these components can adapt based on contextual information. For instance, in a project view that is empty, a message like "You have no projects yet" could be displayed by the empty state component.

To implement this, you can use:

<ng-container *ngIf="isLoading" ><app-loading-state></app-loading-state></ng-container>
<ng-container *ngIf="error" ><app-error-state [reason]="Failed to load"></app-error-state></ng-container>
<ng-container *ngIf="!isLoading" ><!-- Content of your view here. --></ng-container>

Answer 4

When developing my applications, I always make sure to include a loading state component. It's important to cover all aspects of UI components, including:

blank state (Content is loaded but empty, such as an empty list)
loading state (Content is still loading)
partial state (Certain parts of the view are not yet complete or working on certain elements, like a long list with few entries)
error state (Something has gone wrong and cannot be recovered)
ideal state (Perfect scenario where content is available and well-structured)

In my approach, I create components specifically for error, loading, and blank states, while incorporating ideal and partial states into other components. By providing inputs, these components can adapt based on contextual information. For instance, in a project view that is empty, a message like "You have no projects yet" could be displayed by the empty state component.

To implement this, you can use:

<ng-container *ngIf="isLoading" ><app-loading-state></app-loading-state></ng-container>
<ng-container *ngIf="error" ><app-error-state [reason]="Failed to load"></app-error-state></ng-container>
<ng-container *ngIf="!isLoading" ><!-- Content of your view here. --></ng-container>

Steps to create a personalized loading screen using Angular

Answer №1

Answer №2

Similar questions

What is the best way to retrieve the previous URL in Angular after the current URL has been refreshed or changed

String date in the format "dd-MM-yyyy" cannot be transformed into a date using the 'DatePipe' function

The battle of Any, Generic Type, and Unknown in Typescript

Creating a declaration of an array containing key value pairs in Typescript

The 'Subscription' type does not contain the properties: source, operator, lift, subscribe, and three other properties that are present in the 'Observable<EnumValue[]>' type

Error in Ionic Cordova Build prod: Module "." not found - Requires Typescript version >3

Guidelines for displaying user profile information in the dashboard page through an Angular project, considering the different user types (user, super user, admin)

React: a versatile and type-specific onChange() function

The error message "Error: cannot read property ‘setDirtyAttribute’ of null" may be encountered when attempting to use the method YourModel.create({...}) in ember-typescript-cli

Limit access to a specific route within the URL

Providing the correct context to the function in Angular's dialog data is crucial for seamless

Azure pipeline failing to run Visual Studio 2017 task because of outdated Typescript SDK version

Subscribing to ngrx store triggers multiple emissions

Tips for Verifying a User's Identity using Username and Password

The issue I'm encountering in Angular 2 with Angular Material is the inability to delete specific items from a mat

Unable to remove item from store using NgRx is causing issues

How come ngOnChange is unable to detect changes in @Input elements when ngOnDetect is able to do so?

TypeScript has two variable types

Ionic 2 Media Plugin File Status with Ionic Native

Managing copious amounts of data in an Angular project using a Restful API