extract infinite scroll loader

meetulr · Oct 27, 2024 · e42b8fe · e42b8fe
1 parent f773005
commit e42b8fe
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 84 deletions.
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/src/components/AddPeopleToTag/AddPeopleToTag.module.css
@@ -51,27 +51,3 @@
   max-height: 350px; /* Set your desired max height */
   overflow-y: auto; /* Enable vertical scrolling */
 }
-
-/* SimpleLoader.css */
-.simple-loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-top-color: #3498db;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx
@@ -20,6 +20,7 @@ import { ADD_PEOPLE_TO_TAG } from 'GraphQl/Mutations/TagMutations';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { WarningAmberRounded } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 /**
  * Props for the `AddPeopleToTag` component.
@@ -280,7 +281,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                   id="scrollableDiv"
                   data-testid="scrollableDiv"
                   style={{
-                    height: 300,
+                    maxHeight: 300,
                     overflow: 'auto',
                   }}
                 >
@@ -291,11 +292,7 @@ const AddPeopleToTag: React.FC<InterfaceAddPeopleToTagProps> = ({
                       userTagsMembersToAssignToData?.getUserTag.usersToAssignTo
                         .pageInfo.hasNextPage ?? false
                     }
-                    loader={
-                      <div className="simpleLoader">
-                        <div className="spinner" />
-                      </div>
-                    }
+                    loader={<InfiniteScrollLoader />}
                     scrollableTarget="scrollableDiv"
                   >
                     <DataGrid

diff --git a/src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.module.css
@@ -0,0 +1,24 @@
+/* InfiniteScrollLoader.module.css */
+.simpleLoader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+  margin: 1rem 0;
+  border: 4px solid transparent; /* Set all sides transparent */
+  border-top-color: var(--bs-gray-400); /* Color only the top border */
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/InfiniteScrollLoader/InfiniteScrollLoader.test.tsx b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import InfiniteScrollLoader from './InfiniteScrollLoader';
+
+describe('Testing InfiniteScrollLoader component', () => {
+  test('Component should be rendered properly', () => {
+    render(<InfiniteScrollLoader />);
+
+    expect(screen.getByTestId('infiniteScrollLoader')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('infiniteScrollLoaderSpinner'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx b/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './InfiniteScrollLoader.module.css';
+
+const InfiniteScrollLoader = (): JSX.Element => {
+  return (
+    <div data-testid="infiniteScrollLoader" className={styles.simpleLoader}>
+      <div
+        data-testid="infiniteScrollLoaderSpinner"
+        className={styles.spinner}
+      />
+    </div>
+  );
+};
+
+export default InfiniteScrollLoader;
diff --git a/src/components/TagActions/TagActions.module.css b/src/components/TagActions/TagActions.module.css
@@ -148,27 +148,3 @@
   color: rgb(77, 76, 76);
   font-weight: 600;
 }
-
-/* SimpleLoader.css */
-.simpleLoader {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--bs-gray);
-  border-top-color: var(--bs-gray);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/TagActions/TagActions.tsx b/src/components/TagActions/TagActions.tsx
@@ -24,6 +24,7 @@ import { TAGS_QUERY_PAGE_SIZE } from 'utils/organizationTagsUtils';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { WarningAmberRounded } from '@mui/icons-material';
 import TagNode from './TagNode';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 interface InterfaceUserTagsAncestorData {
   _id: string;
@@ -359,7 +360,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
                   id="scrollableDiv"
                   data-testid="scrollableDiv"
                   style={{
-                    height: 300,
+                    maxHeight: 300,
                     overflow: 'auto',
                   }}
                   className={`${styles.scrContainer}`}
@@ -371,11 +372,7 @@ const TagActions: React.FC<InterfaceTagActionsProps> = ({
                       orgUserTagsData?.organizations[0].userTags.pageInfo
                         .hasNextPage ?? false
                     }
-                    loader={
-                      <div className="simpleLoader">
-                        <div className="spinner" />
-                      </div>
-                    }
+                    loader={<InfiniteScrollLoader />}
                     scrollableTarget="scrollableDiv"
                   >
                     {userTagsList?.map((tag) => (

diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx
@@ -9,6 +9,7 @@ import type { InterfaceOrganizationSubTagsQuery } from 'utils/organizationTagsUt
 import { TAGS_QUERY_PAGE_SIZE } from 'utils/organizationTagsUtils';
 import styles from './TagActions.module.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 interface InterfaceTagNodeProps {
   tag: InterfaceTagData;
@@ -141,7 +142,7 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
             id={`subTagsScrollableDiv${tag._id}`}
             data-testid={`subTagsScrollableDiv${tag._id}`}
             style={{
-              height: 300,
+              maxHeight: 300,
               overflow: 'auto',
             }}
             className={`${styles.scrContainer}`}
@@ -152,11 +153,7 @@ const TagNode: React.FC<InterfaceTagNodeProps> = ({
               hasMore={
                 subTagsData?.getUserTag.childTags.pageInfo.hasNextPage ?? false
               }
-              loader={
-                <div className="simpleLoader">
-                  <div className="spinner" />
-                </div>
-              }
+              loader={<InfiniteScrollLoader />}
               scrollableTarget={`subTagsScrollableDiv${tag._id}`}
             >
               {subTagsList.map((tag: InterfaceTagData) => (

diff --git a/src/screens/ManageTag/ManageTag.module.css b/src/screens/ManageTag/ManageTag.module.css
@@ -122,6 +122,6 @@
   scrollbar-width: auto;
   scrollbar-color: var(--bs-gray-400) var(--bs-white);
 
-  height: calc(100vh - 18rem);
+  max-height: calc(100vh - 18rem);
   overflow: auto;
 }
diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx
@@ -38,6 +38,7 @@ import {
 import AddPeopleToTag from 'components/AddPeopleToTag/AddPeopleToTag';
 import TagActions from 'components/TagActions/TagActions';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 /**
  * Component that renders the Manage Tag screen when the app navigates to '/orgtags/:orgId/managetag/:tagId'.
@@ -461,11 +462,7 @@ function ManageTag(): JSX.Element {
                     userTagAssignedMembersData?.getUserTag.usersAssignedTo
                       .pageInfo.hasNextPage ?? false
                   }
-                  loader={
-                    <div className="simpleLoader">
-                      <div className="spinner" />
-                    </div>
-                  }
+                  loader={<InfiniteScrollLoader />}
                   scrollableTarget="manageTagScrollableDiv"
                 >
                   <DataGrid

diff --git a/src/screens/OrganizationTags/OrganizationTags.module.css b/src/screens/OrganizationTags/OrganizationTags.module.css
@@ -144,6 +144,6 @@
   scrollbar-width: auto;
   scrollbar-color: var(--bs-gray-400) var(--bs-white);
 
-  height: calc(100vh - 18rem);
+  max-height: calc(100vh - 18rem);
   overflow: auto;
 }
diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx
@@ -26,6 +26,7 @@ import { Stack } from '@mui/material';
 import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries';
 import { CREATE_USER_TAG } from 'GraphQl/Mutations/TagMutations';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 /**
  * Component that renders the Organization Tags screen when the app navigates to '/orgtags/:orgId'.
@@ -341,11 +342,7 @@ function OrganizationTags(): JSX.Element {
                   orgUserTagsData?.organizations[0].userTags.pageInfo
                     .hasNextPage ?? false
                 }
-                loader={
-                  <div className="simpleLoader">
-                    <div className="spinner" />
-                  </div>
-                }
+                loader={<InfiniteScrollLoader />}
                 scrollableTarget="orgUserTagsScrollableDiv"
               >
                 <DataGrid

diff --git a/src/screens/SubTags/SubTags.module.css b/src/screens/SubTags/SubTags.module.css
@@ -140,6 +140,6 @@
   scrollbar-width: auto;
   scrollbar-color: var(--bs-gray-400) var(--bs-white);
 
-  height: calc(100vh - 18rem);
+  max-height: calc(100vh - 18rem);
   overflow: auto;
 }
diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx
@@ -29,6 +29,7 @@ import {
   USER_TAG_SUB_TAGS,
 } from 'GraphQl/Queries/userTagQueries';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader';
 
 /**
  * Component that renders the SubTags screen when the app navigates to '/orgtags/:orgId/subtags/:tagId'.
@@ -397,11 +398,7 @@ function SubTags(): JSX.Element {
                   subTagsData?.getUserTag.childTags.pageInfo.hasNextPage ??
                   false
                 }
-                loader={
-                  <div className="simpleLoader">
-                    <div className="spinner" />
-                  </div>
-                }
+                loader={<InfiniteScrollLoader />}
                 scrollableTarget="subTagsScrollableDiv"
               >
                 <DataGrid