diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 186debfc..05be38b7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -34,7 +34,10 @@
-
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
index 40e99da2..d67cbd5a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts
@@ -25,6 +25,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
eventList$: Observable
;
roomInfo: RoomInfo;
roomInfoSubscription: Subscription;
+ eventListProcessing$: Observable;
constructor(
private store: Store,
@@ -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)
);
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index 5d97d48f..7d77dee7 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/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,
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
index 06d0e007..58719033 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/reducers.ts
+++ b/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
};
}),
diff --git a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts b/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
index a6e56dfa..42dcda6f 100644
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/event/state.ts
+++ b/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(selector: Selector) {
return {
+ infoListProcessing: createSelector(
+ selector,
+ (state: State) => state.infoListProcessing
+ ),
infoList: createSelector(
selector,
(state: State) => state.infoList