Presentation of information with loading and error scenarios

Question

Presentation of information with loading and error scenarios

How can we effectively display data in an Angular view, considering loading state and error handling?

Imagine we are fetching a set of documents from our backend and need to present them in an Angular view. We want to address three possible scenarios by providing corresponding messages to the user:

Loading your data...
Error trying to retrieve your data!
Data retrieved successfully!

Currently, my approach involves displaying both the "loading" and "error" messages briefly during the data retrieval process.

I am curious about how others tackle this common scenario. Is it feasible to manage this by manipulating the myDocs variable, or should I introduce another variable for better control?

Typescript Implementation (TS)

export class MyDocsComponent implements OnInit {

    myDocs: IMyDoc | null;

    ngOnInit() {

        // fetch myDocs
        this.myDocsService.getMyDocs()

        // if successful
        .then( myDocs => { this.myDocs = myDocs; })

        // if there's an error while retrieving myDocs from the service
        .catch( error => {
            // What actions should be taken here?
            // How can this be managed in the view 
            // to inform the user that data retrieval failed?
            // And also display a loading message prior to this.

            // Currently, I am using:
            this.myDocs = null;
            // However, this results in the error message 
            // being displayed prematurely during data loading.
        });
    }
}

HTML Markup (HTML)

<!-- Loading State -->
<div class="loading" *ngIf="!myDocs">
    Loading your data...
</div>

<!-- Error State -->
<div class="error" *ngIf="myDocs==null">
    Error trying to retrieve your data!                         
</div>

<!-- Success State -->
<div class="success" *ngIf="myDocs">
    Data retrieved successfully!
    <div class="list" *ngFor="let d of myDocs">{{ d.title }}</div>
</div>

angular typescript

Answer 1

Answer №1

Here is an example you can try out

file.component.ts

export class MyDocsComponent implements OnInit {

  myDocs: IMyDoc | null;

  state: 'loading' | 'loaded' | 'error' = 'loading';

  isLoading() {
    return this.state === 'loading';
  }

  isError() {
    return this.state === 'error';
  }

  isLoaded() {
    return this.state === 'loaded';
  }

  ngOnInit() {
    this.myDocsService.getMyDocs()
      .then(myDocs => {
        this.myDocs = myDocs;
        this.state = 'loaded';
      })
      .catch(error => {
        console.log(error);
        this.state = 'error';
      });
  }
}

file.component.html

<div *ngIf="isLoading"  class="loading">
  Loading your data...
</div>

<div *ngIf="isError" class="error">
  Error trying to retrieve your data!
</div>

<div *ngIf="isSuccess" class="success" >
  Data retrieved successfully!
  <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
  </div>
</div>

Answer 2

Here is an example you can try out

file.component.ts

export class MyDocsComponent implements OnInit {

  myDocs: IMyDoc | null;

  state: 'loading' | 'loaded' | 'error' = 'loading';

  isLoading() {
    return this.state === 'loading';
  }

  isError() {
    return this.state === 'error';
  }

  isLoaded() {
    return this.state === 'loaded';
  }

  ngOnInit() {
    this.myDocsService.getMyDocs()
      .then(myDocs => {
        this.myDocs = myDocs;
        this.state = 'loaded';
      })
      .catch(error => {
        console.log(error);
        this.state = 'error';
      });
  }
}

file.component.html

<div *ngIf="isLoading"  class="loading">
  Loading your data...
</div>

<div *ngIf="isError" class="error">
  Error trying to retrieve your data!
</div>

<div *ngIf="isSuccess" class="success" >
  Data retrieved successfully!
  <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
  </div>
</div>

Answer 3

Answer №2

Here is an alternative solution to address the issue at hand. In response to the OP's request, I have relocated it to a different answer. Please refrain from upvoting this.

This method involves leveraging some more advanced features in Angular such as

async pipe,
<ng-container>,
as keyword within the *ngIf statement,
else loading paired with <ng-template #loading>.

component.ts

export class MyDocsComponent implements OnInit {
  myDocs$: Promise<IMyDoc | string>;

  ngOnInit() {
    this.myDocs$ = this.myDocsService.getMyDocs()
      .then(response => {
        console.log('Data retrieved successfully');
        return response;
      })
      .catch(error => {
        console.log(error);
        return 'An error occurred';
      });
  }

  isError(resp: IMyDoc | string) {
    return typeof resp === 'string';
  }

  isSuccess(resp: IMyDoc | string) {
    return typeof resp !== 'string';
  }
}

component.html

<div *ngIf="myDocs$ | async as myDocs; else loading">
  <ng-container *ngIf="isSuccess(myDocs)">
    <div class="success"
      Data retrieved successfully!
      <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="isError(myDocs)">
    <div class="error">
      Error retrieving data!
    </div>
  </ng-container>
</div>

<ng-template #loading>
  <div *ngIf="isLoading" class="loading">
    Loading data...
  </div>
</ng-template>

Answer 4

Here is an alternative solution to address the issue at hand. In response to the OP's request, I have relocated it to a different answer. Please refrain from upvoting this.

This method involves leveraging some more advanced features in Angular such as

async pipe,
<ng-container>,
as keyword within the *ngIf statement,
else loading paired with <ng-template #loading>.

component.ts

export class MyDocsComponent implements OnInit {
  myDocs$: Promise<IMyDoc | string>;

  ngOnInit() {
    this.myDocs$ = this.myDocsService.getMyDocs()
      .then(response => {
        console.log('Data retrieved successfully');
        return response;
      })
      .catch(error => {
        console.log(error);
        return 'An error occurred';
      });
  }

  isError(resp: IMyDoc | string) {
    return typeof resp === 'string';
  }

  isSuccess(resp: IMyDoc | string) {
    return typeof resp !== 'string';
  }
}

component.html

<div *ngIf="myDocs$ | async as myDocs; else loading">
  <ng-container *ngIf="isSuccess(myDocs)">
    <div class="success"
      Data retrieved successfully!
      <div class="list" *ngFor="let d of myDocs"> {{ d.title }}
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="isError(myDocs)">
    <div class="error">
      Error retrieving data!
    </div>
  </ng-container>
</div>

<ng-template #loading>
  <div *ngIf="isLoading" class="loading">
    Loading data...
  </div>
</ng-template>

Presentation of information with loading and error scenarios

Answer №1

Answer №2

Similar questions

Encountered a problem while trying to set up the Angular Material Library that has been cloned from

Encountering SUID Sandbox Helper Issue When Running "npm start" on WSL with Electron and Typescript

Tips for successfully passing a prop to a custom root component in material-ui@next with TypeScript

Uncovering redundant fields in TypeScript and detecting errors through type inference

Can type information be incorporated during compilation?

Tips for displaying an associative object array as td elements within a tbody in Nuxt

The Highcharts xrange series is encountering the error message "x is not a function."

Setting the initial selected option in a dropdown using Angular 4 Reactive Forms

Can someone guide me on finding my staticwebapp.config.json within Azure Devops for deploying Azure Static Web Apps during a release?

Tips for showcasing nested objects in Angular components

Accessing user information after logging in can be achieved through utilizing Web API in conjunction with Angular 5 Token Authentication

Tips for accessing the app instance within a module in Nest.js

Utilizing the power of the Google Calendar API with a service account in a Node.js environment

Unusual conduct exhibited by a 16th version Angular module?

Creating a custom directive in Angular 2 that restricts input to text only

M.E.A.N - Suite for setting up and defining backend boundaries consisting of MongoDB, Express.js, Angular2, node.js

Can we verify if this API response is accurate?

Steps to deactivate a button in an Angular reactive form upon submission

NativeScript does not acknowledge the permission "android.Manifest.permission.READ_CONTACTS"

There are no imports in index.js and there is no systemjs configuration set up