fix: loading on ion-table (#822) 🔨

Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Sep 13, 2023 · 79991bc · 79991bc
1 parent 3169263
commit 79991bc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/projects/ion/src/lib/table/table.component.html b/projects/ion/src/lib/table/table.component.html
@@ -183,17 +183,36 @@
     </tbody>
   </table>
   <div *ngIf="smartData.length === 0" class="noData">
+    <ion-spinner
+      *ngIf="config.loading; else noData"
+      [size]="42"
+      color="primary"
+    ></ion-spinner>
+  </div>
+
+  <ng-template #noData>
     <ion-icon size="40" type="exclamation-rounded"></ion-icon>
     <span>Não há dados</span>
-  </div>
+  </ng-template>
+
   <div
     *ngIf="config.pagination"
     data-testid="pagination-container"
     class="footer-table"
   >
-    <span>{{ config.pagination.total }}</span>
+    <span *ngIf="!config.loading">{{ config.pagination.total }}</span>
+
+    <span
+      *ngIf="config.loading"
+      class="loading-message"
+      data-testid="loading-pagination"
+    >
+      Carregando página
+    </span>
+
     <div style="overflow-x: auto">
       <ion-pagination
+        [loading]="config.loading"
         [total]="config.pagination.total"
         [itemsPerPage]="config.pagination.itemsPerPage"
         [page]="config.pagination.page"

diff --git a/projects/ion/src/lib/table/table.component.spec.ts b/projects/ion/src/lib/table/table.component.spec.ts
@@ -19,6 +19,7 @@ import { SafeAny } from '../utils/safe-any';
 import { StatusType } from './../core/types/status';
 import { IonTableComponent } from './table.component';
 import { IonTableModule } from './table.module';
+import { IonSpinnerModule } from './../spinner/spinner.module';
 import { ActionTable, Column, ColumnType, ConfigTable } from './utilsTable';
 
 const disabledArrowColor = '#CED2DB';
@@ -88,6 +89,7 @@ const sut = async (
       IonTagModule,
       IonPopConfirmModule,
       IonTooltipModule,
+      IonSpinnerModule,
     ],
   });
 };
@@ -243,6 +245,7 @@ describe('Table > Changes', () => {
         IonTagModule,
         IonPopConfirmModule,
         IonTooltipModule,
+        IonSpinnerModule,
       ],
     });
     const newData = [{ name: 'Meteora', deleted: false, id: 2 }];
@@ -264,6 +267,7 @@ describe('Table > Changes', () => {
         IonTagModule,
         IonPopConfirmModule,
         IonTooltipModule,
+        IonSpinnerModule,
       ],
     });
     propsToChange.config.data = [];
@@ -692,6 +696,28 @@ describe('Table > Pagination', () => {
     },
   };
 
+  it('should render loading when table is loading', async () => {
+    const tableWithLoading = JSON.parse(
+      JSON.stringify(tableWithPagination)
+    ) as IonTableProps<Disco>;
+    const totalPagination = screen.queryByTestId('total-pagination');
+    tableWithLoading.config.loading = true;
+    await sut(tableWithLoading);
+    expect(screen.getByTestId('loading-pagination')).toBeInTheDocument();
+    expect(totalPagination).not.toBeInTheDocument();
+  });
+
+  it('should render loading when dont have data and table is loading', async () => {
+    const tableWithLoading = JSON.parse(
+      JSON.stringify(tableWithPagination)
+    ) as IonTableProps<Disco>;
+    tableWithLoading.config.loading = true;
+    tableWithLoading.config.data = [];
+
+    await sut(tableWithLoading);
+    expect(screen.getByTestId('ion-spinner')).toBeInTheDocument();
+  });
+
   it('should render the pagination', async () => {
     await sut(tableWithPagination);
     expect(screen.getByTestId('pagination-container')).toBeInTheDocument();
@@ -876,6 +902,7 @@ const sutCustomRowTemplate = async (
       IonTagModule,
       IonPopConfirmModule,
       IonTableModule,
+      IonSpinnerModule,
     ],
   });
 };

diff --git a/projects/ion/src/lib/table/table.module.ts b/projects/ion/src/lib/table/table.module.ts
@@ -8,6 +8,7 @@ import { IonIconModule } from '../icon/icon.module';
 import { IonPaginationModule } from '../pagination/pagination.module';
 import { IonPopConfirmModule } from '../popconfirm/popconfirm.module';
 import { IonTooltipModule } from '../tooltip/tooltip.module';
+import { IonSpinnerModule } from '../spinner/spinner.module';
 
 @NgModule({
   declarations: [IonTableComponent],
@@ -20,6 +21,7 @@ import { IonTooltipModule } from '../tooltip/tooltip.module';
     IonPaginationModule,
     IonPopConfirmModule,
     IonTooltipModule,
+    IonSpinnerModule,
   ],
   exports: [IonTableComponent],
 })