Merge pull request #1260 from hotosm/feat(manage-organizations)/imple…

…ment-skeleton-while-loading

Feat(manage organizations)/implement skeleton while loading

src/frontend/src/components/organisation/OrganizationCardSkeleton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import CoreModules from '@/shared/CoreModules';
+
+const OrganisationCardSkeleton = ({ cardsPerRow, defaultTheme }) => {
+  return cardsPerRow.map((data, index) => {
+    return (
+      <div
+        key={`${data}-${index}`}
+        style={{
+          width: `${100 / cardsPerRow.length}%`,
+          padding: 5,
+          border: '1px solid lightgray',
+          marginTop: '1%',
+          marginLeft: '0.1%',
+          marginRight: '0.1%',
+          height: 'inherit',
+        }}
+      >
+        <div className="fmtm-flex fmtm-gap-4">
+          <div className="row fmtm-mt-3">
+            <div className="col-md-12">
+              <CoreModules.SkeletonTheme baseColor={defaultTheme.palette.loading['skeleton_rgb']}>
+                <CoreModules.Skeleton width={100} style={{ marginTop: '3%' }} height={100} count={1} />
+              </CoreModules.SkeletonTheme>
+            </div>
+          </div>
+
+          <div className="row mt-2 fmtm-w-full">
+            <div className="col-md-12">
+              <CoreModules.SkeletonTheme baseColor={defaultTheme.palette.loading['skeleton_rgb']}>
+                <CoreModules.Skeleton width={100} style={{ marginTop: '3%' }} count={1} />
+              </CoreModules.SkeletonTheme>
+            </div>
+            <div className="col-md-4 mt-1">
+              <CoreModules.SkeletonTheme
+                baseColor={defaultTheme.palette.loading['skeleton_rgb']}
+                highlightColor={defaultTheme.palette.loading['skeleton_rgb']}
+              >
+                <CoreModules.Skeleton height={20} count={2} />
+              </CoreModules.SkeletonTheme>
+            </div>
+            <div className="col-md-12 fmtm-mt-4 fmtm-mb-2">
+              <CoreModules.SkeletonTheme
+                baseColor={defaultTheme.palette.loading['skeleton_rgb']}
+                highlightColor={defaultTheme.palette.loading['skeleton_rgb']}
+              >
+                <CoreModules.Skeleton width={69} style={{ marginTop: '3%', float: 'right' }} count={1} />
+              </CoreModules.SkeletonTheme>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  });
+};
+
+export default OrganisationCardSkeleton;

src/frontend/src/views/Home.jsx

@@ -11,6 +11,12 @@ import AssetModules from '@/shared/AssetModules';
 import ProjectListMap from '@/components/home/ProjectListMap';
 
 const Home = () => {
+  const dispatch = CoreModules.useAppDispatch();
+  //dispatch function to perform redux state mutation
+
+  const { type } = windowDimention();
+  //get window dimension
+
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [paginationPage, setPaginationPage] = useState(1);
@@ -21,23 +27,16 @@ const Home = () => {
   // const state:any = CoreModules.useAppSelector(state=>state.project.projectData)
   // console.log('state main :',state)
 
-  const { type } = windowDimention();
-  //get window dimension
-
-  const dispatch = CoreModules.useAppDispatch();
-  //dispatch function to perform redux state mutation
-
   const stateHome = CoreModules.useAppSelector((state) => state.home);
   //we use use selector from redux to get all state of home from home slice
+
   const filteredProjectCards = stateHome.homeProjectSummary;
 
   let cardsPerRow = new Array(
     type == 'xl' ? 7 : type == 'lg' ? 5 : type == 'md' ? 4 : type == 'sm' ? 3 : type == 's' ? 2 : 1,
   ).fill(0);
   //calculating number of cards to to display per row in order to fit our window dimension respectively and then convert it into dummy array
 
-  const theme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
-
   const handleSearch = (query) => {
     setSearchQuery(query);
   };

src/frontend/src/views/Organisation.tsx

@@ -6,27 +6,42 @@ import { user_roles } from '@/types/enums';
 import { GetOrganisationDataModel } from '@/models/organisation/organisationModel';
 import OrganisationGridCard from '@/components/organisation/OrganisationGridCard';
 import { useNavigate } from 'react-router-dom';
+import OrganisationCardSkeleton from '@/components/organisation/OrganizationCardSkeleton';
+import windowDimention from '@/hooks/WindowDimension';
 
 const Organisation = () => {
   const navigate = useNavigate();
+  const dispatch = CoreModules.useAppDispatch();
+  //dispatch function to perform redux state mutation
+
+  const { type } = windowDimention();
+  //get window dimension
 
   const [searchKeyword, setSearchKeyword] = useState<string>('');
   const [activeTab, setActiveTab] = useState<0 | 1>(0);
   const [verifiedTab, setVerifiedTab] = useState<boolean>(true);
   const token = CoreModules.useAppSelector((state) => state.login.loginToken);
-
-  const handleSearchChange = (event) => {
-    setSearchKeyword(event.target.value);
-  };
-
-  const dispatch = CoreModules.useAppDispatch();
+  const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
 
   const organisationData: GetOrganisationDataModel[] = CoreModules.useAppSelector(
     (state) => state.organisation.organisationData,
   );
   const myOrganisationData: GetOrganisationDataModel[] = CoreModules.useAppSelector(
     (state) => state.organisation.myOrganisationData,
   );
+
+  const organisationDataLoading = CoreModules.useAppSelector((state) => state.organisation.organisationDataLoading);
+  const myOrganisationDataLoading = CoreModules.useAppSelector((state) => state.organisation.myOrganisationDataLoading);
+  // loading states for the organisations from selector
+
+  let cardsPerRow = new Array(
+    type == 'xl' ? 3 : type == 'lg' ? 3 : type == 'md' ? 3 : type == 'sm' ? 2 : type == 's' ? 2 : 1,
+  ).fill(0);
+  // calculate number of cards to display according to the screen size
+
+  const handleSearchChange = (event) => {
+    setSearchKeyword(event.target.value);
+  };
   const filteredBySearch = (data, searchKeyword) => {
     const filteredCardData: GetOrganisationDataModel[] = data?.filter((d) =>
       d.name.toLowerCase().includes(searchKeyword.toLowerCase()),
@@ -176,16 +191,56 @@ const Organisation = () => {
         />
       </CoreModules.Box>
       {activeTab === 0 ? (
-        <OrganisationGridCard
-          filteredData={filteredBySearch(organisationData, searchKeyword)}
-          allDataLength={organisationData?.length}
-        />
+        !organisationDataLoading ? (
+          <CoreModules.Stack
+            sx={{
+              display: {
+                xs: 'flex',
+                sm: 'flex',
+                md: 'flex',
+                lg: 'flex',
+                xl: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'left',
+                width: '100%',
+                gap: 10,
+              },
+            }}
+          >
+            <OrganisationCardSkeleton defaultTheme={defaultTheme} cardsPerRow={cardsPerRow} />
+          </CoreModules.Stack>
+        ) : (
+          <OrganisationGridCard
+            filteredData={filteredBySearch(organisationData, searchKeyword)}
+            allDataLength={organisationData?.length}
+          />
+        )
       ) : null}
       {activeTab === 1 ? (
-        <OrganisationGridCard
-          filteredData={filteredBySearch(myOrganisationData, searchKeyword)}
-          allDataLength={myOrganisationData?.length}
-        />
+        !myOrganisationDataLoading ? (
+          <CoreModules.Stack
+            sx={{
+              display: {
+                xs: 'flex',
+                sm: 'flex',
+                md: 'flex',
+                lg: 'flex',
+                xl: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'left',
+                width: '100%',
+                gap: 10,
+              },
+            }}
+          >
+            <OrganisationCardSkeleton defaultTheme={defaultTheme} cardsPerRow={cardsPerRow} />
+          </CoreModules.Stack>
+        ) : (
+          <OrganisationGridCard
+            filteredData={filteredBySearch(myOrganisationData, searchKeyword)}
+            allDataLength={myOrganisationData?.length}
+          />
+        )
       ) : null}
     </CoreModules.Box>
   );