Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@anexia/registry-loading-interceptor

Package Overview
Dependencies
Maintainers
8
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@anexia/registry-loading-interceptor

This library provides an interceptor which maps Http Requests to a Loading State.

  • 12.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
8
Created
Source

Registry Loading Interceptor

This library provides an interceptor which maps Http Requests to a Loading State. You're able to subscribe per request to the loading state.

Usage Scenarios

  • implicit "isLoadingAny" used for a global spinner indicator to show that anything is going on in the network
  • explicit "isLoading" may be used to show exact loading indicator to a certain context

Usage

  1. Import the RegisterLoadingInterceptorModule in your root module (hint: most of the time: app.module.ts)
  2. Create your own SelectorFacade to the loading state

Definitions

RequestIdStrategy

Provides a mechanism to generate an ID from a request. Default ships with a URL to ID example. Trough this Request ID you're able to create a selector to observe the loading state of a single request.

RequestFilterStrategy

You may not want to map every request to a loading state, this is the place where you can provide a mechanism to filter/exclude request.

  • If using Angular 12, you can provide your own HttpContext based filter.

SelectorFacade

Create a service which injects RegistryLoadingInterceptorand filters RequestID based on the loadingState$.

Usage Example

App Module Configuration

Root Module (app.module.ts) registration and configuration

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ... other imports
    RegistryLoadingInterceptorModule
  ],
  
})
export class AppModule { }

Selector Facade

@Injectable({providedIn: 'root'})
export class IsLoadingService {

  public constructor(
    private readonly loadingRegistry: RegistryLoadingInterceptor,
    @Inject(REQUEST_ID_GENERATOR) private readonly idGenerator: UrlFragmentIdGenerator
  ) {

  }

  public isLoading$(url: string): Observable<boolean> {
    const requestId = this.idGenerator.getIdentifier(url);
    return this.loadingRegistry.loadingState$.pipe(
      map(state => state.has(requestId) ? state.get(requestId) as boolean : false),
      distinctUntilChanged()
    );
  }

  public isAnyLoading$(): Observable<boolean> {
    return this.loadingRegistry.isAnyRequestLoading$;
  }
}

DataAccess Level: Test DataAccess Example


@Injectable({
  providedIn: 'root'
})
export class TestDataAccessService {

  private static getUsersEndpoint = '/users';

  public userListLoading$: Observable<boolean>;

  public constructor(
    private readonly httpClient: HttpClient,
    private readonly isLoadingService: IsLoadingService
    ) {
    // register request loading listener
    this.userListLoading$ = isLoadingService.isLoading$(TestDataAccessService.getUsersEndpoint);
  }

  public getUsers$(): Observable<unknown> {
    return this.httpClient.get(TestDataAccessService.getUsersEndpoint);
  }
}

Component Level

import {Component} from '@angular/core';
import {TestDataAccessService} from "./test-data-access.service";
import {IsLoadingService} from "./is-loading.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public constructor(
    private readonly testDataAccess: TestDataAccessService,
    private readonly isLoadingService: IsLoadingService
  ) {
    // connect the facade with the view
    testDataAccess.userListLoading$.subscribe(res => console.log('explicit', res));
    // implicit loading state, will provide Loadign state for any http request
    this.isLoadingService.isAnyLoading$().subscribe(res => console.log('implicit', res));

    this.testDataAccess.getUsers$().subscribe(console.log);

  }

}

Data Sequence Diagram

Customize

To use custom Request ID Strategy or custom Request Filtering you just need to provide REQUEST_ID_GENERATOR or REQUEST_ID_GENERATOR.

 {provide: REQUEST_ID_GENERATOR, useClass: CustomIdGenerator},

Keywords

FAQs

Package last updated on 04 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc