[Improvement] SYST-516: Move table loading spinner to top left of the table body

components/table.tsx

@@ -568,24 +568,32 @@ function Table({
                 })()}
               </TableSummary>
             )}
-
-            {isLoading && (
-              <OverlayBlocker
-                styles={{
-                  self: css`
-                    display: flex;
-                    justify-content: center;
-                    backdrop-filter: blur(0.5px);
-                    background-color: rgba(255, 255, 255, 0.6);
-                  `,
-                }}
-                show={isLoading}
-                onClick="preventDefault"
-              >
-                <LoadingSpinner iconSize={24} />
-              </OverlayBlocker>
-            )}
           </TableContainer>
+
+          {isLoading && (
+            <OverlayBlocker
+              styles={{
+                self: css`
+                  display: flex;
+                  align-items: start;
+                  justify-content: center;
+                  padding-top: 60px;
+
+                  ${(actions || showPagination) &&
+                  css`
+                    padding-top: 120px;
+                  `}
+
+                  backdrop-filter: blur(0.5px);
+                  background-color: rgba(255, 255, 255, 0.6);
+                `,
+              }}
+              show={isLoading}
+              onClick="preventDefault"
+            >
+              <LoadingSpinner iconSize={24} />
+            </OverlayBlocker>
+          )}
         </Wrapper>
       </TableColumnContext.Provider>
     </DnDContext.Provider>
@@ -691,9 +699,9 @@ const PaginationSelectedItem = styled.span<{ $style?: CSSProp }>`
 `;
 
 const TableContainer = styled.div<{ $hasSelected: boolean }>`
+  position: relative;
   display: flex;
   flex-direction: column;
-  position: relative;
   height: 100%;
   overflow: hidden;
 

test/component/table.cy.tsx

@@ -83,6 +83,59 @@ describe("Table", () => {
     );
   }
 
+  context("isLoading", () => {
+    it("should render loading-spinner around the row.level", () => {
+      cy.mount(<BasicTable isLoading />);
+
+      cy.findByLabelText("overlay-blocker")
+        .should("exist")
+        .and("have.css", "padding-top", "60px");
+
+      cy.findByLabelText("overlay-blocker").then(($overlay) => {
+        const overlayRect = $overlay[0].getBoundingClientRect();
+
+        cy.findByLabelText("circle").then(($spinner) => {
+          const spinnerRect = $spinner[0].getBoundingClientRect();
+
+          const distance = spinnerRect.top - overlayRect.top;
+
+          expect(distance).to.be.closeTo(60, 10); // 60px is overlay padding-top
+        });
+      });
+    });
+
+    context("when given actions", () => {
+      it("should render loading-spinner around the row.level", () => {
+        cy.mount(
+          <BasicTable
+            actions={[
+              {
+                caption: "Test",
+              },
+            ]}
+            isLoading
+          />
+        );
+
+        cy.findByLabelText("overlay-blocker")
+          .should("exist")
+          .and("have.css", "padding-top", "120px");
+
+        cy.findByLabelText("overlay-blocker").then(($overlay) => {
+          const overlayRect = $overlay[0].getBoundingClientRect();
+
+          cy.findByLabelText("circle").then(($spinner) => {
+            const spinnerRect = $spinner[0].getBoundingClientRect();
+
+            const distance = spinnerRect.top - overlayRect.top;
+
+            expect(distance).to.be.closeTo(120, 10); // 120px is overlay padding-top
+          });
+        });
+      });
+    });
+  });
+
   context("selected", () => {
     context("when selected", () => {
       it("should render with selected background-color (rgb(219, 234, 254))", () => {
@@ -1109,6 +1162,7 @@ describe("Table", () => {
     context("with pagination wrapper style", () => {
       context("when given width full and justify-end", () => {
         it("renders on the end content", () => {
+          cy.viewport(800, 760);
           cy.mount(
             <Table
               selectable
@@ -1147,7 +1201,7 @@ describe("Table", () => {
           );
 
           cy.findByLabelText("pagination-wrapper")
-            .should("have.css", "width", "432px")
+            .should("have.css", "width", "717px")
             .and("have.css", "justify-content", "end");
         });
       });