452 loading bar when loading data

src/app/app.module.ts

@@ -67,6 +67,7 @@ import { InputDateComponent } from './modules/shared/components/input-date/input
 import { TimeRangeFormComponent } from './modules/reports/components/time-range-form/time-range-form.component';
 import { TimeEntriesTableComponent } from './modules/reports/components/time-entries-table/time-entries-table.component';
 import { DialogComponent } from './modules/shared/components/dialog/dialog.component';
+import { LoadingBarComponent } from './modules/shared/components/loading-bar/loading-bar.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -114,6 +115,7 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeFormComponent,
     TimeEntriesTableComponent,
     DialogComponent,
+    LoadingBarComponent
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -6,11 +6,16 @@
         <th class="col-3 text-center"></th>
       </tr>
     </thead>
-    <tbody>
+    <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+    <tbody *ngIf="(isLoading$ | async) === false">
       <tr class="d-flex" *ngFor="let activity of activities">
         <td class="col-sm-9">{{ activity.name }}</td>
         <td class="col-sm-3 text-center">
-          <button type="button" class="btn btn-sm btn-primary" (click)="updateActivity(activity.id)">
+          <button
+            type="button"
+            class="btn btn-sm btn-primary"
+            (click)="updateActivity(activity.id)"
+          >
             <i class="fa fa-pencil fa-xs"></i>
           </button>
           <button

src/app/modules/activities-management/components/activity-list/activity-list.component.ts

@@ -1,11 +1,13 @@
-import { OnInit } from '@angular/core';
-import { Component } from '@angular/core';
-import { Store, select } from '@ngrx/store';
-
-import { LoadActivities, DeleteActivity, SetActivityToEdit } from './../../store/activity-management.actions';
-import { ActivityState } from './../../store/activity-management.reducers';
-import { allActivities } from '../../store';
+import { Component, OnInit } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { getIsLoading } from 'src/app/modules/activities-management/store/activity-management.selectors';
 import { Activity } from '../../../shared/models';
+import { allActivities } from '../../store';
+import { DeleteActivity, LoadActivities, SetActivityToEdit } from './../../store/activity-management.actions';
+import { ActivityState } from './../../store/activity-management.reducers';
+
 
 @Component({
   selector: 'app-activity-list',
@@ -18,7 +20,10 @@ export class ActivityListComponent implements OnInit {
   activityToDelete: Activity;
   message: string;
   idToDelete: string;
-  constructor(private store: Store<ActivityState>) {}
+  isLoading$: Observable<boolean>;
+  constructor(private store: Store<ActivityState>) {
+    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
+  }
 
   ngOnInit() {
     this.store.dispatch(new LoadActivities());

src/app/modules/activities-management/components/create-activity/create-activity.component.spec.ts

@@ -7,7 +7,7 @@ import {
   ActivityState,
   CreateActivity,
   UpdateActivity,
-  activityIdtoEdit,
+  activityIdToEdit,
   allActivities,
   ResetActivityToEdit,
 } from '../../store';
@@ -74,7 +74,7 @@ describe('CreateActivityComponent', () => {
       activityIdToEdit: '1',
     };
 
-    activityIdtoEditMock = store.overrideSelector(activityIdtoEdit, currentState.activityIdToEdit);
+    activityIdtoEditMock = store.overrideSelector(activityIdToEdit, currentState.activityIdToEdit);
     allActivitiesMock = store.overrideSelector(allActivities, currentState.data);
     getActivityByIdMock = store.overrideSelector(allActivitiesMock, activityIdtoEditMock);
 

src/app/modules/activities-management/store/activity-management.reducers.ts

@@ -71,10 +71,10 @@ export function activityManagementReducer(state: ActivityState = initialState, a
     }
 
     case ActivityManagementActionTypes.DELETE_ACTIVITY_SUCCESS: {
-      const activites = state.data.filter((activity) => activity.id !== action.activityId);
+      const activities = state.data.filter((activity) => activity.id !== action.activityId);
       return {
         ...state,
-        data: activites,
+        data: activities,
         isLoading: false,
         message: 'Activity removed successfully!',
       };

src/app/modules/activities-management/store/activity-management.selectors.spec.ts

@@ -4,7 +4,7 @@ describe('ActivityManagement Selectors', () => {
 
   it('reads activityIdtoEdit from state', () => {
     const activityId = 'id';
-    const activityIdFound = selectors.activityIdtoEdit.projector({ activityIdToEdit: activityId });
+    const activityIdFound = selectors.activityIdToEdit.projector({ activityIdToEdit: activityId });
     expect(activityIdFound).toBe(activityId);
   });
 

src/app/modules/activities-management/store/activity-management.selectors.ts

@@ -1,21 +1,18 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
-
 import { ActivityState } from './activity-management.reducers';
 
 const getActivityState = createFeatureSelector<ActivityState>('activities');
 
-export const allActivities = createSelector(getActivityState, (state: ActivityState) => {
-  return state.data;
-});
+export const allActivities = createSelector(getActivityState, (state: ActivityState) => state?.data);
 
-export const activityIdtoEdit = createSelector(getActivityState, (state: ActivityState) => {
-  return state.activityIdToEdit;
-});
+export const activityIdToEdit = createSelector(getActivityState, (state: ActivityState) => state?.activityIdToEdit);
 
-export const getActivityById = createSelector(allActivities, activityIdtoEdit, (activities, activityId) => {
+export const getActivityById = createSelector(allActivities, activityIdToEdit, (activities, activityId) => {
   if (activities && activityId) {
     return activities.find((activity) => {
       return activity.id === activityId;
     });
   }
 });
+
+export const getIsLoading = createSelector(getActivityState, (state: ActivityState) => state?.isLoading);

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -11,11 +11,16 @@
       <th class="col-3 text-center">Options</th>
     </tr>
   </thead>
-  <tbody>
+  <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+  <tbody *ngIf="((isLoading$ | async) === false)">
     <tr class="d-flex" *ngFor="let customer of customers">
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
-        <button (click)="editCustomer(customer.id)" type="button" class="btn btn-sm btn-primary">
+        <button
+          (click)="editCustomer(customer.id)"
+          type="button"
+          class="btn btn-sm btn-primary"
+        >
           <i class="fa fa-pencil fa-xs"></i>
         </button>
         <button

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -1,17 +1,16 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, AfterViewInit} from '@angular/core';
-import {ActionsSubject, Store} from '@ngrx/store';
-
-import {Subject, Subscription} from 'rxjs';
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { ActionsSubject, select, Store } from '@ngrx/store';
+import { DataTableDirective } from 'angular-datatables';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { delay, filter } from 'rxjs/operators';
+import { getIsLoading } from 'src/app/modules/customer-management/store/customer-management.selectors';
+import { Customer } from './../../../../../shared/models/customer.model';
 import {
   CustomerManagementActionTypes,
   DeleteCustomer,
   LoadCustomers,
   SetCustomerToEdit
 } from './../../../../store/customer-management.actions';
-import {Customer} from './../../../../../shared/models/customer.model';
-import {filter} from 'rxjs/operators';
-import {DataTableDirective} from 'angular-datatables';
-
 @Component({
   selector: 'app-customer-list',
   templateUrl: './customer-list.component.html',
@@ -32,8 +31,11 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   showModal = false;
   idToDelete: string;
   message: string;
+  isLoading$: Observable<boolean>;
 
-  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) { }
+  constructor(private store: Store<Customer>, private actionsSubject$: ActionsSubject) {
+    this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
+  }
 
   ngOnInit(): void {
     this.dtOptions = {

src/app/modules/customer-management/components/projects/components/store/project.selectors.ts

@@ -1,17 +1,12 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
-
 import { ProjectState } from './project.reducer';
 
 const getProjectState = createFeatureSelector<ProjectState>('projects');
 
-export const getCustomerProjects = createSelector(getProjectState, (state: ProjectState) => {
-  return state;
-});
+export const getCustomerProjects = createSelector(getProjectState, (state: ProjectState) => state);
+
+export const getProjects = createSelector(getProjectState, (state: ProjectState) => state?.projects);
 
-export const getProjects = createSelector(getProjectState, (state: ProjectState) => {
-  return state.projects;
-});
+export const getProjectToEdit = createSelector(getProjectState, (state: ProjectState) => state?.projectToEdit);
 
-export const getProjectToEdit = createSelector(getProjectState, (state: ProjectState) => {
-  return state.projectToEdit;
-});
+export const getIsLoading = createSelector(getProjectState, (state: ProjectState) => state?.isLoading);

src/app/modules/customer-management/store/customer-management.selectors.ts

@@ -1,6 +1,6 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
-
 import { CustomerState } from './customer-management.reducers';
+
 export const getCustomerState = createFeatureSelector<CustomerState>('customers');
 
 export const getStatusMessage = createSelector(getCustomerState, (messageState) => {
@@ -34,3 +34,7 @@ export const getCustomerUnderEdition = createSelector(allCustomers, customerIdto
     });
   }
 });
+
+export const getIsLoading = createSelector(getCustomerState, (state: CustomerState) => {
+  return state.isLoading;
+});

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,44 +1,57 @@
 <div class="row mt-5">
   <div class="col">
-    <table class="table table-sm table-striped" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
+    <table
+      class="table table-sm table-striped"
+      datatable
+      [dtTrigger]="dtTrigger"
+      [dtOptions]="dtOptions"
+      *ngIf="(reportDataSource$ | async) as dataSource"
+    >
       <thead class="thead-blue">
-      <tr class="d-flex">
-        <th class="col md-col">ID</th>
-        <th class="col md-col">User email</th>
-        <th class="col sm-col">Date</th>
-        <th class="col sm-col">Duration (hours)</th>
-        <th class="col sm-col">Time in</th>
-        <th class="col sm-col">Time out</th>
-        <th class="col md-col">Project</th>
-        <th class="col lg-col">Project ID</th>
-        <th class="col md-col">Customer</th>
-        <th class="col lg-col">Customer ID</th>
-        <th class="col md-col">Activity</th>
-        <th class="col lg-col">Ticket</th>
-        <th class="col lg-col">Description</th>
-        <th class="col lg-col">Technologies</th>
-      </tr>
+        <tr class="d-flex">
+          <th class="col md-col">ID</th>
+          <th class="col md-col">User email</th>
+          <th class="col sm-col">Date</th>
+          <th class="col sm-col">Duration (hours)</th>
+          <th class="col sm-col">Time in</th>
+          <th class="col sm-col">Time out</th>
+          <th class="col md-col">Project</th>
+          <th class="col lg-col">Project ID</th>
+          <th class="col md-col">Customer</th>
+          <th class="col lg-col">Customer ID</th>
+          <th class="col md-col">Activity</th>
+          <th class="col lg-col">Ticket</th>
+          <th class="col lg-col">Description</th>
+          <th class="col lg-col">Technologies</th>
+        </tr>
       </thead>
-      <tbody>
-      <tr
-        class="d-flex"
-        *ngFor="let entry of data"
-      >
-        <td class="col md-col multiline-col"> {{ entry.id }} </td>
-        <td class="col md-col multiline-col"> {{ entry.owner_email }} </td>
-        <td class="col sm-col"> {{ entry.start_date | date: 'MM/dd/yyyy' }} </td>
-        <td class="col sm-col"> {{ entry.end_date | substractDate: entry.start_date }} </td>
-        <td class="col sm-col"> {{ entry.start_date | date: 'HH:mm' }} </td>
-        <td class="col sm-col"> {{ entry.end_date | date: 'HH:mm' }} </td>
-        <td class="col md-col"> {{ entry.project_name }} </td>
-        <td class="col md-col"> {{ entry.project_id }} </td>
-        <td class="col md-col"> {{ entry.customer_name }} </td>
-        <td class="col md-col"> {{ entry.customer_id }} </td>
-        <td class="col md-col"> {{ entry.activity_name }} </td>
-        <td class="col lg-col"> {{ entry.uri }} </td>
-        <td class="col lg-col multiline-col"> {{ entry.description }} </td>
-        <td class="col lg-col multiline-col"> {{ entry.technologies }} </td>
-      </tr>
+      <app-loading-bar
+        *ngIf="dataSource.isLoading"
+      ></app-loading-bar>
+      <tbody *ngIf="!dataSource.isLoading">
+        <tr
+          class="d-flex"
+          *ngFor="let entry of dataSource.data"
+        >
+          <td class="col md-col multiline-col">{{ entry.id }}</td>
+          <td class="col md-col multiline-col">{{ entry.owner_email }}</td>
+          <td class="col sm-col">
+            {{ entry.start_date | date: 'MM/dd/yyyy' }}
+          </td>
+          <td class="col sm-col">
+            {{ entry.end_date | substractDate: entry.start_date }}
+          </td>
+          <td class="col sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
+          <td class="col sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
+          <td class="col md-col">{{ entry.project_name }}</td>
+          <td class="col md-col">{{ entry.project_id }}</td>
+          <td class="col md-col">{{ entry.customer_name }}</td>
+          <td class="col md-col">{{ entry.customer_id }}</td>
+          <td class="col md-col">{{ entry.activity_name }}</td>
+          <td class="col lg-col">{{ entry.uri }}</td>
+          <td class="col lg-col multiline-col">{{ entry.description }}</td>
+          <td class="col lg-col multiline-col">{{ entry.technologies }}</td>
+        </tr>
       </tbody>
     </table>
   </div>