Loading components and error treatment

See how to change the error and loading components

Loading Component

Beagle’s library already has a default component that’s called when a screen loads. If necessary, you are able to change it to a customized one, according to your application’s needs.

To create a loading component, follow the steps below:

On React:

Step 1: Create a substitute component;

See an example:

import React, { FC } from 'react'

const CustomLoadingComponent: FC<any> = () => {
  return (
    <div>Carregando</div>
  )
}

export default CustomLoadingComponent

Step 2: Add it to Beagle’s Service components list to substitute the default component:

import { createBeagleUIService } from '@zup-it/beagle-react'
import CustomLoadingComponent from '../components/CustomLoading'

export default createBeagleUIService<any>({
  baseUrl: "localhost:4000",
  components: {
    "custom:loading":CustomLoadingComponent
  }
})

On Angular

Step 1: Create a substitute component.

You can use angular CLI, if you want, to generate the component automatically, see:

ng generate component components/custom-loading

Step 2: After that, open beagle-components.module.ts file and add the component to the list:

import { NgModule } from '@angular/core'
import { CustomLoadingComponent } from './components/custom-loading/custom-loading.component';
// import all the components you're going to use with beagle

const components = [
  CustomLoadingComponent
];

@NgModule({
  declarations: components,
  entryComponents: components,
  exports: components,
  imports: [
    // everything your components depend on
  ],
})
export class BeagleComponentsModule {}

Step 3: Now, you can replace the default component in beagle.module.ts file:

import { BeagleModule } from '@zup-it/beagle-angular';
import { CustomLoadingComponent } from './components/custom-loading/custom-loading.component';
// import all the components you wish to use with Beagle.

@BeagleModule({
  baseUrl: 'http://mypath',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    'custom:loading': CustomLoadingComponent
  }
})
export class Beagle { }

Error Component

The default error component on Beagle is called when a connection error happens, for example, when a server path cannot be reached.

To this component, the library shows an interface called ErrorComponentParams, throught it you have access to the error list and a retry method, responsible to retry the server request.

ErrorComponentParams

AttributeTypeDefinition
retryMethodRetry the request to the server.

When using this interface, you can create a component, see the example below with each framework:

On React, you have to create a Functional Component that uses the ErrorComponentParams interface. When using it, you have access to two props errors and retry, which are the errors list and the retry method, both described on the interface:

import { ErrorComponentParams } from '@zup-it/beagle-react'
import React, { FC } from 'react'

const CustomErrorComponent: FC<ErrorComponentParams> = ({ retry }) => {

  return (
    <>
      <p>
        Unexpected Error!
      </p>
      <button onClick={retry}>Retry</button>
    </>
  )
}


export default CustomErrorComponent

After that, add it to the Beagle Service components list:

import { createBeagleUIService } from '@zup-it/beagle-react'
import CustomErrorComponent from '../components/CustomError'

export default createBeagleUIService<any>({
  baseUrl: "localhost:4000",
  components: {
    "custom:error":CustomErrorComponent
  }
})

On Angular, create a component, if you prefer use angula cli to automatically generate the inicial structure:

ng g component components/custom-error

Open the controller file of the created component and add the ErrorComponentParams interface. The interface gives access to two @Inputs errors and retry, which are the errors list and the request method:

import { Component, Input } from '@angular/core';
import { ErrorComponentParams } from '@zup-it/beagle-angular';

@Component({
  selector: 'app-custom-error',
  templateUrl: './custom-error.component.html',
  styleUrls: ['./custom-error.component.less']
})
export class CustomErrorComponent implements ErrorComponentParams {

  @Input() retry: () => void;

  handleRetry() {
    this.retry();
  }

}

Now, add the created component to the file list beagle-components.module.ts

import { NgModule } from '@angular/core';
import { CustomErrorComponent } from './components/custom-error/custom-error.component';
// import all the components you're going to use with beagle

const components = [
  CustomErrorComponent
];

@NgModule({
  declarations: components,
  entryComponents: components,
  exports: components,
  imports: [
    // everything your components depend on
  ],
})
export class BeagleComponentsModule {}

Finally, replace the default component to beagle.module.ts file:

import { CustomErrorComponent } from './components/custom-error/custom-error.component';
// import all the components you wish to use with Beagle.

@BeagleModule({
  baseUrl: 'http://localhost:4202/assets',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    'custom:error': CustomErrorComponent
  }
})
export class Beagle { }

Last modified February 11, 2021: create content (#298) (43225e15)