Creating a loading screen in Angular 4: Insert an item into the HTML and then set it to disappear automatically after

Question

Creating a loading screen in Angular 4: Insert an item into the HTML and then set it to disappear automatically after

I'm dealing with a loading screen that typically takes between 15-30 seconds to load about 50 items onto the page. The loading process displays each item on the page using the message:

Loading item x

For each data call made to the database, an observable/subscription is used. When the data is received, the subscription triggers and adds it to an HTML string like this:

sync() {
    this.syncStatus = "Starting sync"
    this.syncService.sync().subscribe((status: string) => {
        this.syncStatus += "<div>" + status + '</div>';
    }, (error: string) => {
        console.log(error);
    }, () => {
        this.Redirect();
    });
}

<div class="description">
   <span [innerHTML]="syncStatus"></span>
</div>

Currently, the list display can get cut off due to its length, especially when there are more than 50 items (sometimes even hundreds). I am looking for a way to display each individual item on the page for 5 seconds before hiding it. Any suggestions?

javascript angular typescript

Answer 1

Answer №1

To organize the sync status, you can store objects with timestamps and then sort them accordingly.

sync() {
    this.syncStatus = [{ msg: 'Starting Sync', time: Date.now() }];
    this.syncService.sync().subscribe((status: string) => {
        this.syncStatus.unshift(status);
        this.removeOldEntries();
    }, (error: string) => {
        console.log(error);
    }, () => {
        this.Redirect();
    });
}

You can remove outdated entries by filtering:

removeOldEntries() {
   this.syncStatus = this.syncStatus.filter((status) => status.time < Date.now() - 300000); // 5 minutes
}

Answer 2

To organize the sync status, you can store objects with timestamps and then sort them accordingly.

sync() {
    this.syncStatus = [{ msg: 'Starting Sync', time: Date.now() }];
    this.syncService.sync().subscribe((status: string) => {
        this.syncStatus.unshift(status);
        this.removeOldEntries();
    }, (error: string) => {
        console.log(error);
    }, () => {
        this.Redirect();
    });
}

You can remove outdated entries by filtering:

removeOldEntries() {
   this.syncStatus = this.syncStatus.filter((status) => status.time < Date.now() - 300000); // 5 minutes
}

Answer 3

Answer №2

Utilizing Angular components can greatly enhance your development process

Check out the Source Code on Stack Blitz

Explanation of Component Usage

Avoid the need for date creation to track data arrival times
Easily manage and avoid sifting through large datasets
By adopting Angular component methodology, each component can autonomously handle its removal

Main Component.ts Implementation

export class AppComponent {
  data = [
    "Hello 0"
  ];

  count = 1;

  ngOnInit() {
    // Simulate backend subscription
    setInterval(() => {
      if (!this.data) {
        this.data = []
      }

      this.data.push("Hello " + this.count ++);
    }, 1000);
  }
}

Main Component.html Structure

<div class="description">
   <div *ngFor="let datum of data; let i = index">
     <hello [ref]="data" [index]="i">{{datum}}</hello>
   </div>
</div>

Hello.ts Component Logic

@Component({
  selector: 'hello',
  template: `<ng-content></ng-content>`
})
export class HelloComponent  {
  @Input() ref;
  @Input() index: number;

  ngOnInit() {
    // Automatically remove component after specified timeout
    setTimeout(() => {
      this.ref.splice(this.index, 1);
    }, 5000);
  }
}

Answer 4

Utilizing Angular components can greatly enhance your development process

Check out the Source Code on Stack Blitz

Explanation of Component Usage

Avoid the need for date creation to track data arrival times
Easily manage and avoid sifting through large datasets
By adopting Angular component methodology, each component can autonomously handle its removal

Main Component.ts Implementation

export class AppComponent {
  data = [
    "Hello 0"
  ];

  count = 1;

  ngOnInit() {
    // Simulate backend subscription
    setInterval(() => {
      if (!this.data) {
        this.data = []
      }

      this.data.push("Hello " + this.count ++);
    }, 1000);
  }
}

Main Component.html Structure

<div class="description">
   <div *ngFor="let datum of data; let i = index">
     <hello [ref]="data" [index]="i">{{datum}}</hello>
   </div>
</div>

Hello.ts Component Logic

@Component({
  selector: 'hello',
  template: `<ng-content></ng-content>`
})
export class HelloComponent  {
  @Input() ref;
  @Input() index: number;

  ngOnInit() {
    // Automatically remove component after specified timeout
    setTimeout(() => {
      this.ref.splice(this.index, 1);
    }, 5000);
  }
}

Creating a loading screen in Angular 4: Insert an item into the HTML and then set it to disappear automatically after

Answer №1

Answer №2

Similar questions

Creating a concise TypeScript declaration file for an established JavaScript library

Trying to figure out how to execute a codeigniter helper function with JQuery AJAX?

What is the correct way to initialize and assign an observable in Angular using AngularFire2?

Guide on importing a client-side script using browserify with module.exports exposed through jadeify

Angular app unit tests encountering issues due to Keycloak role-based redirection mechanism

Is there a way to automatically compress Express JS assets?

Developing a tool for switching between languages in an internationalization application

Retrieve the initial element from a JSON object to identify errors, without being dependent on its specific key name

JavaScript's Ajax POST request to PHP is not functioning as expected

When attempting to dispatch in getServerSideProps, the State refuses to change. Could it be due to the Redux-Next-Wrapper?

Issues arise when using ng-repeat in conjunction with ng-click

Steps for setting up type-graphql in your projectNeed help with

Is there a way to showcase the JSON data within a nested array using VueJS?

Timeout error of 10000ms occurred while using await with Promise.all in Mocha unit tests

Error message shows explicit Typescript type instead of using generic type name

TextGeometry failing to render

MTG Life counter. Display fluctuations in count

Issue encountered when AngularJS struggles to evaluate regular expression within ng-pattern

Making a single variable object as opposed to using multiple variables

Troubleshooting Problems with Linking Components to app.component.html in Angular