progressbar of message list is added

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -34,7 +34,10 @@
     </div>
   </mat-toolbar>
   <!-- / CHAT TOOLBAR -->
-
+  <mat-progress-bar
+    *ngIf="eventListProcessing$ | async"
+    mode="indeterminate"
+  ></mat-progress-bar>
   <!-- CHAT CONTENT -->
   <div fxFlex="1 1 auto" class="chat-content">
     <!-- CHAT MESSAGES -->

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -25,6 +25,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
   eventList$: Observable<Info[]>;
   roomInfo: RoomInfo;
   roomInfoSubscription: Subscription;
+  eventListProcessing$: Observable<boolean>;
 
   constructor(
     private store: Store<any>,
@@ -53,6 +54,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
+    this.eventListProcessing$ = this.store.pipe(
+      select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
+    );
+
     this.eventList$ = this.store.pipe(
       select(AppStore.MessengerSelector.EventSelector.infoList)
     );

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -8,6 +8,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
@@ -31,6 +32,7 @@ import { DIALOGS } from './dialogs';
     MatDialogModule,
     MatIconModule,
     MatMenuModule,
+    MatProgressBarModule,
     MatTabsModule,
     MatToolbarModule,
     UCapUiModule,

projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts

@@ -1,14 +1,29 @@
 import { createReducer, on } from '@ngrx/store';
 import { initialState } from './state';
-import { infoSuccess, appendInfoList } from './actions';
+import { infoSuccess, appendInfoList, info, infoFailure } from './actions';
 
 export const reducer = createReducer(
   initialState,
+  on(info, (state, action) => {
+    return {
+      ...state,
+      infoListProcessing: true
+    };
+  }),
+
   on(infoSuccess, (state, action) => {
     return {
       ...state,
       infoList: action.infoList,
-      infoStatus: action.res
+      infoStatus: action.res,
+      infoListProcessing: false
+    };
+  }),
+
+  on(infoFailure, (state, action) => {
+    return {
+      ...state,
+      infoListProcessing: false
     };
   }),
 

projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts

@@ -2,17 +2,23 @@ import { Selector, createSelector } from '@ngrx/store';
 import { InfoResponse, Info } from '@ucap-webmessenger/protocol-event';
 
 export interface State {
+  infoListProcessing: boolean;
   infoList: Info[] | null;
   infoStatus: InfoResponse | null;
 }
 
 export const initialState: State = {
+  infoListProcessing: false,
   infoList: null,
   infoStatus: null
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
+    infoListProcessing: createSelector(
+      selector,
+      (state: State) => state.infoListProcessing
+    ),
     infoList: createSelector(
       selector,
       (state: State) => state.infoList