Merge pull request stakwork#320 from MahtabBukhari/centered-loading-s…

…pinner-on-pages center the loading spinner on pages
aliraza556 · Mar 1, 2024 · 2650953 · 2650953
2 parents 61777fb + 86bb3df
commit 2650953
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 39 deletions.
diff --git a/src/pages/bots/Body.tsx b/src/pages/bots/Body.tsx
@@ -39,12 +39,12 @@ const BotText = styled.div`
 
 const Body = styled.div`
   flex: 1;
-  height: calc(100% - 105px);
-  padding-bottom: 80px;
+  height: calc(100vh - 60px);
   width: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 const Label = styled.div`
   font-family: Roboto;

diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts
@@ -2,11 +2,12 @@ import styled from 'styled-components';
 
 export const Body = styled.div`
   flex: 1;
-  height: calc(100% - 105px);
+  height: calc(100vh - 60px);
   width: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
 export const OrgBody = styled.div`

diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx
@@ -12,7 +12,6 @@ import { observer } from 'mobx-react-lite';
 import { useStores } from '../../store';
 import { useIsMobile, usePageScroll } from '../../hooks';
 import { SearchTextInput } from '../../components/common';
-import NoResults from '../../people/utils/NoResults';
 import PageLoadSpinner from '../../people/utils/PageLoadSpinner';
 import { colors } from '../../config/colors';
 import tags from './tags';
@@ -22,7 +21,6 @@ import Tribe from './Tribe';
 const Body = styled.div`
   flex: 1;
   height: calc(100vh - 60px);
-  // padding-bottom:80px;
   width: 100%;
   overflow: auto;
   background: ${colors.dark.tribesBackground};
@@ -45,6 +43,35 @@ const StyledTagPopupWrapper = styled.div`
   }
 `;
 
+const H = styled.div`
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 37px;
+  letter-spacing: 0.1em;
+  text-align: center;
+
+  font-family: Roboto;
+  font-style: normal;
+  line-height: 26px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+
+  color: #292c33;
+  letter-spacing: 0px;
+  color: rgb(60, 63, 65);
+`;
+
+const NoResult = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+`;
+
 function BodyComponent() {
   const { main, ui } = useStores();
   const [selected, setSelected] = useState('');
@@ -120,7 +147,7 @@ function BodyComponent() {
 
   if (loading) {
     return (
-      <Body style={{ justifyContent: 'center', alignItems: 'center' }}>
+      <Body data-testid="content" style={{ justifyContent: 'center', alignItems: 'center' }}>
         <EuiLoadingSpinner size="xl" />
       </Body>
     );
@@ -243,7 +270,9 @@ function BodyComponent() {
                 <Tribe {...t} key={t.uuid} selected={selected === t.uuid} select={selectTribe} />
               ))
             ) : (
-              <NoResults />
+              <NoResult>
+                <H>No results</H>
+              </NoResult>
             )}
           </div>
         </EuiFormFieldset>

diff --git a/src/pages/tribes/__tests__/Body.spec.tsx b/src/pages/tribes/__tests__/Body.spec.tsx
@@ -143,4 +143,32 @@ describe('Tribes Body Component', () => {
       });
     });
   });
+
+  test('content element has justifyContent and alignItems centered', async () => {
+    (useStores as jest.Mock).mockReturnValue({
+      main: {
+        tribes: [],
+        getTribes: jest.fn()
+      },
+      ui: {
+        peoplePageNumber: 1,
+        searchText: 'abc',
+        tags: []
+      }
+    });
+
+    (useFuse as jest.Mock).mockReturnValue([]);
+
+    const { getByTestId } = render(<Body />);
+
+    const contentElement = getByTestId('content');
+
+    expect(contentElement).toBeInTheDocument();
+
+    const styles = window.getComputedStyle(contentElement);
+    const { justifyContent, alignItems } = styles;
+
+    expect(justifyContent).toEqual('center');
+    expect(alignItems).toEqual('center');
+  });
 });
diff --git a/src/people/main/Body.tsx b/src/people/main/Body.tsx
@@ -18,7 +18,7 @@ import { usePeopleFilteredSearch } from './usePeopleFilteredSearch';
 const color = colors['light'];
 const Body = styled.div<{ isMobile: boolean }>`
   flex: 1;
-  height: ${(p: any) => (p.isMobile ? 'calc(100% - 105px)' : 'calc(100% - 65px)')};
+  height: ${(p: any) => (p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)')};
   background: ${(p: any) => (p.isMobile ? undefined : color.grayish.G950)};
   width: 100%;
   overflow-x: hidden;
@@ -94,9 +94,20 @@ function BodyComponent() {
     history.push(`/p/${uuid}`);
   }
 
+  if (isLoading) {
+    return (
+      <Body
+        data-testid="content"
+        isMobile={isMobile}
+        style={{ justifyContent: 'center', alignItems: 'center' }}
+      >
+        <EuiLoadingSpinner size="xl" />
+      </Body>
+    );
+  }
+
   return (
     <Body
-      data-testid="content"
       isMobile={isMobile}
       onScroll={(e: any) => {
         handleScroll(e);
@@ -118,25 +129,21 @@ function BodyComponent() {
         />
       </div>
       <div className="content">
-        {isLoading ? (
-          <EuiLoadingSpinner className="loader" size="xl" />
-        ) : (
-          <>
-            {main.people.map((p: Person) => (
-              <PersonCard
-                {...p}
-                key={p.id}
-                small={isMobile}
-                squeeze={screenWidth < 1420}
-                selected={ui.selectedPerson === p.id}
-                select={selectPerson}
-              />
-            ))}
+        <>
+          {main.people.map((p: Person) => (
+            <PersonCard
+              {...p}
+              key={p.id}
+              small={isMobile}
+              squeeze={screenWidth < 1420}
+              selected={ui.selectedPerson === p.id}
+              select={selectPerson}
+            />
+          ))}
 
-            {!main.people.length && <NoResults />}
-            <PageLoadSpinner noAnimate show={loadingBottom} />
-          </>
-        )}
+          {!main.people.length && <NoResults />}
+          <PageLoadSpinner noAnimate show={loadingBottom} />
+        </>
       </div>
       {openStartUpModel && (
         <StartUpModal closeModal={closeModal} dataObject={'getWork'} buttonColor={'primary'} />

diff --git a/src/people/main/__tests__/Body.spec.tsx b/src/people/main/__tests__/Body.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import nock from 'nock';
 import { user } from '../../../__test__/__mockData__/user';
@@ -15,9 +15,9 @@ describe('BodyComponent', () => {
     .reply(200, {});
 
   it('content element has equal left and right margins', () => {
-    render(<BodyComponent />);
+    const { getByTestId } = render(<BodyComponent />);
 
-    const contentElement = screen.getByTestId('content');
+    const contentElement = getByTestId('content');
 
     expect(contentElement).toBeInTheDocument();
 
@@ -28,17 +28,34 @@ describe('BodyComponent', () => {
     expect(marginLeft).toEqual(marginRight);
   });
 
-  it('filter is in viewport when device is mobile', () => {
-    Object.assign(window, { innerWidth: 375 });
+  it('content element has justifyContent and alignItems centered', async () => {
+    const { getByTestId } = render(<BodyComponent />);
+
+    const contentElement = getByTestId('content');
 
-    render(<BodyComponent />);
-    const filterNode = screen.getByTestId('PeopleHeader');
+    expect(contentElement).toBeInTheDocument();
 
-    const { left, right, bottom, top, width, height } = filterNode.getBoundingClientRect();
+    const styles = window.getComputedStyle(contentElement);
+    const { justifyContent, alignItems } = styles;
 
-    expect(left).toBeGreaterThanOrEqual(0);
-    expect(top).toBeGreaterThanOrEqual(0);
-    expect(right - width).toBeGreaterThanOrEqual(0);
-    expect(bottom - height).toBeGreaterThanOrEqual(0);
+    expect(justifyContent).toEqual('center');
+    expect(alignItems).toEqual('center');
+  });
+
+  it('filter is in viewport when device is mobile', async () => {
+    Object.assign(window, { innerWidth: 375 });
+    act(async () => {
+      render(<BodyComponent />);
+      await waitFor(() => {
+        const filterNode = screen.getByTestId('PeopleHeader');
+
+        const { left, right, bottom, top, width, height } = filterNode.getBoundingClientRect();
+
+        expect(left).toBeGreaterThanOrEqual(0);
+        expect(top).toBeGreaterThanOrEqual(0);
+        expect(right - width).toBeGreaterThanOrEqual(0);
+        expect(bottom - height).toBeGreaterThanOrEqual(0);
+      });
+    });
   });
 });