Ggtcf

Not sure what is the best approach to achieve this.

I have a list of items at this URL: http://localhost/items

When user clicks the edit button(let's say the item 2 button) it will change the route to http://localhost/items/item2

Now I want to get information from database for the selected item and show details information. While waiting for data from the server I want to show a loading progress where the items list is placed, while showing the menu and info components. Like this:

One approach that I used to do this was to simply load the ItemDetails component , show the loading label, made a request to get details and when the data is received I hide the loading label.

 ngOnInit() 
 this.loading = true;
 const itemID = this.route.snapshot.paramMap.get('id');
 this.itemsService
 .getItem(itemID)
 .subscribe(restult => 
 //process result
 this.loading = false;
 );
 

This approach works great but I'm not sure if this is an anti-pattern or not.

The second approach I tried was using a resolver to get the item info and rely on router events(NavigationStart, NavigationEnd) to show the loading label.

The problem with this approach is when the user enters the item details URL in the browser( doesn't click the edit button) : http://localhost/items/item2. it will wait until the data is received then will render all components(menu,info and of course the item details).

So, it is OK to use the first approach or is it an anti pattern? If it's an anti pattern what's the best way to resolve this using a resolver or any other approach in a way that I'm able to show some components(menu,loading bar) while retrieving the data?

You can also use the npm package for the same, So you don't need to set loading flag for each request here is the npm package example.

Package: https://www.npmjs.com/package/ng-http-loader

$ npm install ng-http-loader --save / yarn add ng-http-loader

In AppModule:

`import BrowserModule from '@angular/platform-browser';
 import NgModule from '@angular/core';
 import AppComponent from './app.component';
 import HttpClientModule from '@angular/common/http';
 import NgHttpLoaderModule from 'ng-http-loader';

 @NgModule(
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 HttpClientModule, // <============ (Perform HTTP requests with this module)
 NgHttpLoaderModule.forRoot(), // <============ Don't forget to call 'forRoot()'!
 ],
 providers: [],
 bootstrap: [AppComponent]
)
export class AppModule `

In app.component.html

<ng-http-loader></ng-http-loader>