fix: add count loading spinners to dynamic tables

src/app/files/files-dashboard/files-dashboard.component.ts

@@ -142,14 +142,17 @@ export class FilesDashboardComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.subscriptions.push(
       this.filesWithCountAndTableSettings$.subscribe(
-        ({ origDatablocks, count, tablesSettings }) => {
+        ({ origDatablocks, count, isLoading, tablesSettings }) => {
           this.tablesSettings = tablesSettings;
           this.dataSource.next(origDatablocks);
           this.pending = false;
 
           const savedTableConfigColumns = tablesSettings?.columns;
           const tableSort = this.getTableSort();
-          const paginationConfig = this.getTablePaginationConfig(count);
+          const paginationConfig = this.getTablePaginationConfig(
+            count,
+            isLoading,
+          );
 
           const tableSettingsConfig =
             this.tableConfigService.getTableSettingsConfig(
@@ -203,14 +206,15 @@ export class FilesDashboardComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  getTablePaginationConfig(dataCount = 0): TablePagination {
+  getTablePaginationConfig(dataCount = 0, isLoading = false): TablePagination {
     const { queryParams } = this.route.snapshot;
 
     return {
       pageSizeOptions: this.defaultPageSizeOptions,
       pageIndex: queryParams.pageIndex,
       pageSize: queryParams.pageSize || this.defaultPageSize,
       length: dataCount,
+      isLoading: isLoading,
     };
   }
 

src/app/instruments/instruments-dashboard/instruments-dashboard.component.ts

@@ -101,14 +101,17 @@ export class InstrumentsDashboardComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.subscriptions.push(
       this.instrumentsWithCountAndTableSettings$.subscribe(
-        ({ instruments, count, tablesSettings }) => {
+        ({ instruments, count, isLoading, tablesSettings }) => {
           this.tablesSettings = tablesSettings;
           this.dataSource.next(instruments);
           this.pending = false;
 
           const savedTableConfigColumns = tablesSettings?.columns;
           const tableSort = this.getTableSort();
-          const paginationConfig = this.getTablePaginationConfig(count);
+          const paginationConfig = this.getTablePaginationConfig(
+            count,
+            isLoading,
+          );
 
           const tableSettingsConfig =
             this.tableConfigService.getTableSettingsConfig(
@@ -158,14 +161,15 @@ export class InstrumentsDashboardComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  getTablePaginationConfig(dataCount = 0): TablePagination {
+  getTablePaginationConfig(dataCount = 0, isLoading = false): TablePagination {
     const { queryParams } = this.route.snapshot;
 
     return {
       pageSizeOptions: this.defaultPageSizeOptions,
       pageIndex: queryParams.pageIndex,
       pageSize: queryParams.pageSize || this.defaultPageSize,
       length: dataCount,
+      isLoading: isLoading,
     };
   }
 

src/app/proposals/proposal-datasets/proposal-datasets.component.ts

@@ -170,6 +170,7 @@ export class ProposalDatasetsComponent implements OnInit, OnDestroy {
         pageIndex: data.currentPage || 0,
         pageSize: data.datasetsPerPage || this.defaultPageSize,
         length: data.datasetCount,
+        isLoading: data.isLoading,
       };
 
       if (tableSettingsConfig?.settingList.length) {

src/app/proposals/related-proposals/related-proposals.component.ts

@@ -139,7 +139,7 @@ export class RelatedProposalsComponent implements OnInit, OnDestroy {
     );
 
     this.subscription = this.relatedProposalsWithCount$.subscribe(
-      ({ relatedProposals, relatedProposalsCount }) => {
+      ({ relatedProposals, relatedProposalsCount, isLoading }) => {
         const queryParams = this.route.snapshot.queryParams;
 
         this.dataSource.next(relatedProposals);
@@ -166,6 +166,7 @@ export class RelatedProposalsComponent implements OnInit, OnDestroy {
           pageIndex: queryParams.pageIndex,
           pageSize: queryParams.pageSize || this.defaultPageSize,
           length: relatedProposalsCount,
+          isLoading: isLoading,
         };
 
         if (tableSettingsConfig?.settingList.length) {

src/app/samples/sample-dashboard/sample-dashboard.component.ts

@@ -152,14 +152,17 @@ export class SampleDashboardComponent implements OnInit, OnDestroy {
     this.store.dispatch(fetchMetadataKeysAction());
 
     this.subscriptions.push(
-      this.vm$.subscribe(({ samples, tableSettings, count }) => {
+      this.vm$.subscribe(({ samples, tableSettings, count, isLoading }) => {
         this.tablesSettings = tableSettings;
         this.dataSource.next(samples);
         this.pending = false;
 
         const savedTableConfigColumns = tableSettings?.columns;
         const tableSort = this.getTableSort();
-        const paginationConfig = this.getTablePaginationConfig(count);
+        const paginationConfig = this.getTablePaginationConfig(
+          count,
+          isLoading,
+        );
 
         const tableSettingsConfig =
           this.tableConfigService.getTableSettingsConfig(
@@ -289,7 +292,7 @@ export class SampleDashboardComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  getTablePaginationConfig(dataCount = 0): TablePagination {
+  getTablePaginationConfig(dataCount = 0, isLoading = false): TablePagination {
     const { queryParams } = this.route.snapshot;
 
     if (!queryParams.args) {
@@ -303,6 +306,7 @@ export class SampleDashboardComponent implements OnInit, OnDestroy {
       pageIndex: queryArgsParsed.skip / queryArgsParsed.limit,
       pageSize: queryArgsParsed.limit || this.defaultPageSize,
       length: dataCount,
+      isLoading,
     };
   }
 

src/app/samples/sample-detail/sample-detail.component.ts

@@ -235,6 +235,7 @@ export class SampleDetailComponent
           pageIndex: vm.datasetsPage || 0,
           pageSize: vm.datasetsPerPage || this.pagination.pageSize,
           length: vm.datasetsCount || 0,
+          isLoading: vm.isLoading,
         };
 
         if (tableSettingsConfig?.settingList.length) {

src/app/state-management/actions/proposals.actions.ts

@@ -187,6 +187,10 @@ export const fetchRelatedProposalsFailedAction = createAction(
   "[Proposal] Fetch Related Proposals Failed",
 );
 
+export const fetchRelatedProposalsCountAction = createAction(
+  "[Proposal] Fetch Related Proposals Count",
+);
+
 export const fetchRelatedProposalsCountCompleteAction = createAction(
   "[Proposal] Fetch Related Proposals Count Complete",
   props<{ count: number }>(),

src/app/state-management/effects/proposals.effects.ts

@@ -15,7 +15,7 @@ import {
   selectRelatedProposalsFilters,
   selectFullfacetParams,
 } from "state-management/selectors/proposals.selectors";
-import { map, mergeMap, catchError, switchMap, filter } from "rxjs/operators";
+import { map, mergeMap, catchError, switchMap } from "rxjs/operators";
 import { ObservableInput, of } from "rxjs";
 import {
   loadingAction,
@@ -294,7 +294,7 @@ export class ProposalEffects {
         return this.proposalsService
           .proposalsControllerFindAllV3(JSON.stringify(queryFilter))
           .pipe(
-            map((relatedProposals) => {
+            mergeMap((relatedProposals) => {
               const relatedProposalsWithRelations = relatedProposals.map(
                 (p) => {
                   return {
@@ -307,9 +307,12 @@ export class ProposalEffects {
                 },
               );
 
-              return fromActions.fetchRelatedProposalsCompleteAction({
-                relatedProposals: relatedProposalsWithRelations,
-              });
+              return [
+                fromActions.fetchRelatedProposalsCompleteAction({
+                  relatedProposals: relatedProposalsWithRelations,
+                }),
+                fromActions.fetchRelatedProposalsCountAction(),
+              ];
             }),
             catchError(() =>
               of(fromActions.fetchRelatedProposalsFailedAction()),
@@ -321,7 +324,7 @@ export class ProposalEffects {
 
   fetchRelatedProposalsCount$ = createEffect(() => {
     return this.actions$.pipe(
-      ofType(fromActions.fetchRelatedProposalsAction),
+      ofType(fromActions.fetchRelatedProposalsCountAction),
       concatLatestFrom(() => [this.currentProposal$]),
       switchMap(([, proposal]) => {
         const queryFilter = {

src/app/state-management/reducers/files.reducer.ts

@@ -15,9 +15,20 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.fetchCountAction, (state): FilesState => ({
+    ...state,
+    filesCountIsLoading: true,
+  })),
+
   on(fromActions.fetchCountCompleteAction, (state, { count }): FilesState => ({
     ...state,
     totalCount: count,
+    filesCountIsLoading: false,
+  })),
+
+  on(fromActions.fetchCountFailedAction, (state): FilesState => ({
+    ...state,
+    filesCountIsLoading: false,
   })),
 
   on(

src/app/state-management/reducers/instruments.reducer.ts

@@ -15,14 +15,25 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.fetchCountAction, (state): InstrumentState => ({
+    ...state,
+    instrumentsCountIsLoading: true,
+  })),
+
   on(
     fromActions.fetchCountCompleteAction,
     (state, { count }): InstrumentState => ({
       ...state,
       totalCount: count,
+      instrumentsCountIsLoading: false,
     }),
   ),
 
+  on(fromActions.fetchCountFailedAction, (state): InstrumentState => ({
+    ...state,
+    instrumentsCountIsLoading: false,
+  })),
+
   on(
     fromActions.fetchInstrumentCompleteAction,
     (state, { instrument }): InstrumentState => ({

src/app/state-management/reducers/proposals.reducer.ts

@@ -70,9 +70,26 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.fetchProposalDatasetsCountAction, (state): ProposalsState => ({
+    ...state,
+    datasetsCountIsLoading: true,
+  })),
+
   on(
     fromActions.fetchProposalDatasetsCountCompleteAction,
-    (state, { count }): ProposalsState => ({ ...state, datasetsCount: count }),
+    (state, { count }): ProposalsState => ({
+      ...state,
+      datasetsCount: count,
+      datasetsCountIsLoading: false,
+    }),
+  ),
+
+  on(
+    fromActions.fetchProposalDatasetsCountFailedAction,
+    (state): ProposalsState => ({
+      ...state,
+      datasetsCountIsLoading: false,
+    }),
   ),
 
   on(
@@ -135,11 +152,25 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.fetchRelatedProposalsCountAction, (state): ProposalsState => ({
+    ...state,
+    relatedProposalsCountIsLoading: true,
+  })),
+
   on(
     fromActions.fetchRelatedProposalsCountCompleteAction,
     (state, { count }): ProposalsState => ({
       ...state,
       relatedProposalsCount: count,
+      relatedProposalsCountIsLoading: false,
+    }),
+  ),
+
+  on(
+    fromActions.fetchRelatedProposalsCountFailedAction,
+    (state): ProposalsState => ({
+      ...state,
+      relatedProposalsCountIsLoading: false,
     }),
   ),
 

src/app/state-management/reducers/samples.reducer.ts

@@ -23,14 +23,25 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.fetchSamplesCountAction, (state): SampleState => ({
+    ...state,
+    samplesCountIsLoading: true,
+  })),
+
   on(
     fromActions.fetchSamplesCountCompleteAction,
     (state, { count }): SampleState => ({
       ...state,
       samplesCount: count,
+      samplesCountIsLoading: false,
     }),
   ),
 
+  on(fromActions.fetchSamplesCountFailedAction, (state): SampleState => ({
+    ...state,
+    samplesCountIsLoading: false,
+  })),
+
   on(
     fromActions.fetchMetadataKeysCompleteAction,
     (state, { metadataKeys }): SampleState => ({ ...state, metadataKeys }),
@@ -52,9 +63,26 @@ const reducer = createReducer(
     }),
   ),
 
+  on(fromActions.fetchSampleDatasetsCountAction, (state): SampleState => ({
+    ...state,
+    datasetsCountIsLoading: true,
+  })),
+
   on(
     fromActions.fetchSampleDatasetsCountCompleteAction,
-    (state, { count }): SampleState => ({ ...state, datasetsCount: count }),
+    (state, { count }): SampleState => ({
+      ...state,
+      datasetsCount: count,
+      datasetsCountIsLoading: false,
+    }),
+  ),
+
+  on(
+    fromActions.fetchSampleDatasetsCountFailedAction,
+    (state): SampleState => ({
+      ...state,
+      datasetsCountIsLoading: false,
+    }),
   ),
 
   on(fromActions.addSampleCompleteAction, (state, { sample }): SampleState => {

src/app/state-management/selectors/files.selectors.spec.ts

@@ -15,6 +15,7 @@ const initialFilesState: FilesState = {
   origDatablocks: [],
   currentOrigDatablock: origDatablock,
   totalCount: 0,
+  filesCountIsLoading: false,
 
   filters: filesFilters,
 };
@@ -50,11 +51,13 @@ describe("Files Selectors", () => {
         fromSelectors.selectFilesWithCountAndTableSettings.projector(
           fromSelectors.selectAllOrigDatablocks.projector(initialFilesState),
           fromSelectors.selectOrigDatablocksCount.projector(initialFilesState),
+          fromSelectors.selectFilesCountIsLoading.projector(initialFilesState),
           selectSettings.projector(initialUserState),
         ),
       ).toEqual({
         origDatablocks: [],
         count: 0,
+        isLoading: false,
         tablesSettings: {
           columns: initialUserState.settings.fe_file_table_columns,
         },

src/app/state-management/selectors/files.selectors.ts

@@ -19,13 +19,20 @@ export const selectOrigDatablocksCount = createSelector(
   (state) => state.totalCount,
 );
 
+export const selectFilesCountIsLoading = createSelector(
+  selectFilesState,
+  (state) => state.filesCountIsLoading,
+);
+
 export const selectFilesWithCountAndTableSettings = createSelector(
   selectAllOrigDatablocks,
   selectOrigDatablocksCount,
+  selectFilesCountIsLoading,
   selectSettings,
-  (origDatablocks, count, settings) => ({
+  (origDatablocks, count, isLoading, settings) => ({
     origDatablocks,
     count,
+    isLoading,
     tablesSettings: {
       columns: settings.fe_file_table_columns,
     },