Merge pull request stakwork#287 from MahtabBukhari/display-loading-im…

…age-first display loading image first when loading profile
gouravmpk · Feb 22, 2024 · 0576206 · 0576206
2 parents c0fae2a + 89463fc
commit 0576206
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 60 deletions.
diff --git a/src/pages/people/tabs/Wanted.spec.tsx b/src/pages/people/tabs/Wanted.spec.tsx
@@ -347,13 +347,16 @@ describe('Wanted Component', () => {
       }
     });
     jest.spyOn(mainStore, 'getPersonCreatedBounties').mockReturnValue(Promise.resolve([]));
-
-    const { getByText } = render(
-      <MemoryRouter initialEntries={['/p/1234/bounties']}>
-        <Route path="/p/:uuid/bounties" component={Wanted} />
-      </MemoryRouter>
-    );
-    expect(getByText('No Tickets Yet')).toBeInTheDocument();
+    act(async () => {
+      const { getByText } = render(
+        <MemoryRouter initialEntries={['/p/1234/bounties']}>
+          <Route path="/p/:uuid/bounties" component={Wanted} />
+        </MemoryRouter>
+      );
+      await waitFor(() => {
+        expect(getByText('No Tickets Yet')).toBeInTheDocument();
+      });
+    });
   });
 
   test('when click on post a bounty button should flow through the process', async () => {
@@ -427,4 +430,94 @@ describe('Wanted Component', () => {
       expect(getByText(userBounty.body.title)).toBeInTheDocument();
     });
   });
+
+  test('Should show loading image first and then show correct message if no bounties are assigned', async () => {
+    (usePerson as jest.Mock).mockImplementation(() => ({
+      person: {},
+      canEdit: false
+    }));
+
+    (useStores as jest.Mock).mockReturnValue({
+      main: {
+        getPersonCreatedBounties: jest.fn(() => []),
+        dropDownOrganizations: []
+      },
+      ui: {
+        selectedPerson: '123',
+        meInfo: {
+          owner_alias: 'test'
+        }
+      }
+    });
+    jest.spyOn(mainStore, 'getPersonCreatedBounties').mockReturnValue(Promise.resolve([]));
+
+    act(async () => {
+      const { getByText, getByTestId } = render(
+        <MemoryRouter initialEntries={['/p/1234/bounties']}>
+          <Route path="/p/:uuid/bounties" component={Wanted} />
+        </MemoryRouter>
+      );
+      await waitFor(() => {
+        expect(getByTestId('loading-spinner')).toBeInTheDocument();
+        expect(getByText('No Tickets Yet')).toBeInTheDocument();
+        expect(getByTestId('loading-spinner')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  test('bounties are displayed if there are bounties instead of defualt image', async () => {
+    const createdMockBounties = Array.from({ length: 15 }, (_: any, index: number) => ({
+      ...(mockBounties[0] || {}),
+      bounty: {
+        ...(mockBounties[0]?.bounty || {}),
+        id: mockBounties[0]?.bounty?.id + index + 1
+      }
+    })) as any;
+
+    const userBounties = createdMockBounties.map((bounty: any, index: number) => ({
+      ...bounty,
+      body: {
+        ...bounty.bounty,
+        owner_id: person.owner_pubkey,
+        title: `test bounty here ${index}`
+      }
+    }));
+
+    (usePerson as jest.Mock).mockImplementation(() => ({
+      person: {},
+      canEdit: false
+    }));
+
+    (useStores as jest.Mock).mockReturnValue({
+      main: {
+        getPersonCreatedBounties: jest.fn(() => [userBounties])
+      },
+      ui: {
+        selectedPerson: '123',
+        meInfo: {
+          owner_alias: 'test'
+        }
+      }
+    });
+
+    jest
+      .spyOn(mainStore, 'getPersonCreatedBounties')
+      .mockReturnValue(Promise.resolve(userBounties));
+    act(async () => {
+      const { getByText, getByTestId } = render(
+        <MemoryRouter initialEntries={['/p/1234/bounties']}>
+          <Route path="/p/:uuid/bounties" component={Wanted} />
+        </MemoryRouter>
+      );
+
+      await waitFor(() => getByText(userBounties[0].body.title));
+
+      for (const bounty of userBounties) {
+        expect(getByTestId('loading-spinner')).toBeInTheDocument();
+        expect(getByText('No Tickets Yet')).not.toBeInTheDocument();
+        expect(getByText(bounty.body.title)).toBeInTheDocument();
+        expect(getByTestId('loading-spinner')).not.toBeInTheDocument();
+      }
+    });
+  });
 });
diff --git a/src/pages/people/tabs/Wanted.tsx b/src/pages/people/tabs/Wanted.tsx
@@ -92,7 +92,7 @@ export const Wanted = observer(() => {
     getUserTickets();
   }, [main]);
 
-  if (!main.createdBounties?.length) {
+  if (!main.createdBounties?.length && !loading) {
     return (
       <NoneSpace
         style={{
@@ -120,7 +120,7 @@ export const Wanted = observer(() => {
   }
   return (
     <Container>
-      <PageLoadSpinner show={loading} />
+      {loading && <PageLoadSpinner show={loading} />}
       <Switch>
         <Route path={`${path}/:wantedId/:wantedIndex`}>
           <BountyModal basePath={url} />

diff --git a/src/people/utils/Badges.tsx b/src/people/utils/Badges.tsx
@@ -467,8 +467,8 @@ function Badges(props: BadgesProps) {
 
   return (
     <Wrap>
-      <PageLoadSpinner show={loading} />
-      {selectedBadge ? (
+      {loading && <PageLoadSpinner show={loading} />}
+      {selectedBadge && !loading ? (
         <div style={{ width: '100%' }}>
           <Button
             color="noColor"

diff --git a/src/people/utils/PageLoadSpinner.tsx b/src/people/utils/PageLoadSpinner.tsx
@@ -40,7 +40,7 @@ export default function PageLoadSpinner(props: PageLoadProps) {
   }
 
   return (
-    <LoadmoreWrap show={props.show} style={props.style}>
+    <LoadmoreWrap data-testid={'loading-spinner'} show={props.show} style={props.style}>
       <EuiLoadingSpinner size="l" style={{ marginLeft: 0, padding: 10 }} />
     </LoadmoreWrap>
   );

diff --git a/src/people/widgetViews/OrganizationView.tsx b/src/people/widgetViews/OrganizationView.tsx
@@ -160,7 +160,7 @@ const OrganizationActionWrap = styled.div`
 `;
 
 const Organizations = (props: { person: Person }) => {
-  const [loading, setIsLoading] = useState<boolean>(false);
+  const [loading, setIsLoading] = useState<boolean>(true);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
   const [organization, setOrganization] = useState<Organization>();
@@ -256,7 +256,7 @@ const Organizations = (props: { person: Person }) => {
 
   return (
     <Container>
-      <PageLoadSpinner show={loading} />
+      {loading && <PageLoadSpinner show={loading} />}
       {detailsOpen && (
         <OrganizationDetails
           close={closeDetails}
@@ -265,7 +265,7 @@ const Organizations = (props: { person: Person }) => {
           getOrganizations={getUserOrganizations}
         />
       )}
-      {!detailsOpen && (
+      {!detailsOpen && !loading && (
         <>
           {renderOrganizations()}
           {isOpen && (

diff --git a/src/people/widgetViews/UserTicketsView.tsx b/src/people/widgetViews/UserTicketsView.tsx
@@ -56,7 +56,7 @@ const UserTickets = () => {
   const closeModal = () => setShowDeleteModal(false);
   const showModal = () => setShowDeleteModal(true);
   const [displayedBounties, setDisplayedBounties] = useState<BountyType[]>([]);
-  const [loading, setIsLoading] = useState<boolean>(false);
+  const [loading, setIsLoading] = useState<boolean>(true);
   const [hasMoreBounties, setHasMoreBounties] = useState(true);
   const [bountyOwner, setBountyOwner] = useState<Person>();
   const [page, setPage] = useState(1);
@@ -163,15 +163,15 @@ const UserTickets = () => {
 
   return (
     <Container data-testid="test">
-      <PageLoadSpinner show={loading} />
+      {loading && <PageLoadSpinner show={loading} />}
       <Router history={history}>
         <Switch>
           <Route path={`${path}/:wantedId/:wantedIndex`}>
             <BountyModal fromPage={'usertickets'} bountyOwner={bountyOwner} basePath={url} />
           </Route>
         </Switch>
       </Router>
-      {listItems}
+      {!loading ? listItems : ''}
       {hasMoreBounties && !loading && (
         <LoadMoreContainer
           color={color}