Dedicated skeleton loader folder

src/frontend/src/api/CreateProjectService.ts

@@ -330,9 +330,7 @@ const GetDividedTaskFromGeojson = (url: string, projectData: Record<string, any>
         dispatch(CreateProjectActions.SetIsTasksSplit({ key: 'divide_on_square', value: true }));
         dispatch(CreateProjectActions.SetIsTasksSplit({ key: 'task_splitting_algorithm', value: false }));
         dispatch(CreateProjectActions.SetDividedTaskGeojson(resp));
-        dispatch(CreateProjectActions.SetDividedTaskFromGeojsonLoading(false));
       } catch (error) {
-        dispatch(CreateProjectActions.SetDividedTaskFromGeojsonLoading(false));
       } finally {
         dispatch(CreateProjectActions.SetDividedTaskFromGeojsonLoading(false));
       }
@@ -361,12 +359,10 @@ const GetIndividualProjectDetails = (url: string) => {
         };
 
         dispatch(CreateProjectActions.SetIndividualProjectDetails(modifiedResponse));
-        dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(false));
       } catch (error) {
         if (error.response.status === 404) {
           dispatch(CommonActions.SetProjectNotFound(true));
         }
-        dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(false));
       } finally {
         dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(false));
       }
@@ -411,7 +407,6 @@ const TaskSplittingPreviewService = (
             message: 'Task generation failed. Please try again',
           }),
         );
-        dispatch(CreateProjectActions.GetTaskSplittingPreviewLoading(false));
       } finally {
         dispatch(CreateProjectActions.GetTaskSplittingPreviewLoading(false));
       }
@@ -430,15 +425,13 @@ const PatchProjectDetails = (url: string, projectData: Record<string, any>) => {
         const resp: ProjectDetailsModel = getIndividualProjectDetailsResponse.data;
         // dispatch(CreateProjectActions.SetIndividualProjectDetails(modifiedResponse));
         dispatch(CreateProjectActions.SetPatchProjectDetails(resp));
-        dispatch(CreateProjectActions.SetPatchProjectDetailsLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             message: 'Project Successfully Edited',
             variant: 'success',
           }),
         );
       } catch (error) {
-        dispatch(CreateProjectActions.SetPatchProjectDetailsLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             message: 'Failed. Do you have permission to edit?',
@@ -469,7 +462,6 @@ const PostFormUpdate = (url: string, projectData: Record<string, any>) => {
         const resp: { message: string } = postFormUpdateResponse.data;
         // dispatch(CreateProjectActions.SetIndividualProjectDetails(modifiedResponse));
         // dispatch(CreateProjectActions.SetPostFormUpdate(resp));
-        dispatch(CreateProjectActions.SetPostFormUpdateLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             message: resp.message,
@@ -482,7 +474,6 @@ const PostFormUpdate = (url: string, projectData: Record<string, any>) => {
             message: error?.response?.data?.detail || 'Failed to update Form',
           }),
         );
-        dispatch(CreateProjectActions.SetPostFormUpdateLoading(false));
       } finally {
         dispatch(CreateProjectActions.SetPostFormUpdateLoading(false));
       }
@@ -507,15 +498,13 @@ const EditProjectBoundaryService = (url: string, geojsonUpload: any, dimension:
         const resp: unknown = postBoundaryUpdateResponse.data;
         // dispatch(CreateProjectActions.SetIndividualProjectDetails(modifiedResponse));
         // dispatch(CreateProjectActions.SetPostFormUpdate(resp));
-        dispatch(CreateProjectActions.SetEditProjectBoundaryServiceLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             message: 'Project Boundary Successfully Updated',
             variant: 'success',
           }),
         );
       } catch (error) {
-        dispatch(CreateProjectActions.SetEditProjectBoundaryServiceLoading(false));
       } finally {
         dispatch(CreateProjectActions.SetEditProjectBoundaryServiceLoading(false));
       }
@@ -537,7 +526,6 @@ const ValidateCustomForm = (url: string, formUpload: any, useOdkCollect: boolean
 
         const getTaskSplittingResponse = await axios.post(url, formUploadFormData);
         const resp = getTaskSplittingResponse.data;
-        dispatch(CreateProjectActions.ValidateCustomFormLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             message: JSON.stringify(resp.message),
@@ -551,7 +539,6 @@ const ValidateCustomForm = (url: string, formUpload: any, useOdkCollect: boolean
             message: error?.response?.data?.detail || 'Something Went Wrong',
           }),
         );
-        dispatch(CreateProjectActions.ValidateCustomFormLoading(false));
         dispatch(CreateProjectActions.SetCustomFileValidity(false));
       } finally {
         dispatch(CreateProjectActions.ValidateCustomFormLoading(false));

src/frontend/src/components/OrganizationDashboard/OrganizationInfo.tsx

@@ -5,8 +5,9 @@ import Button from '@/components/common/Button';
 import AssetModules from '@/shared/AssetModules';
 import { GetIndividualOrganizationService, GetOrganizationAdminsService } from '@/api/OrganisationService';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
-import { OrganizationInfoSkeleton, UserListSkeleton } from '@/components/OrganizationDashboard/SkeletonLoader';
 import { useIsOrganizationAdmin } from '@/hooks/usePermissions';
+import UserListSkeleton from '@/components/Skeletons/OrganizationDashboard/UserListSkeleton';
+import OrganizationInfoSkeleton from '@/components/Skeletons/OrganizationDashboard/OrganizationInfoSkeleton';
 
 const VITE_API_URL = import.meta.env.VITE_API_URL;
 
@@ -19,7 +20,7 @@ const OrganizationAdminList = () => {
   return (
     <div className="fmtm-flex fmtm-items-center">
       {organizationAdmins.slice(0, 5).map((user, index) => (
-        <Tooltip key={user.user_id} title={user.username} arrow>
+        <Tooltip key={user.user_sub} title={user.username} arrow>
           <div
             style={{ zIndex: organizationAdmins.length - index }}
             className="fmtm-border fmtm-rounded-full fmtm-h-[1.688rem] fmtm-w-[1.688rem] fmtm-relative fmtm-mr-[-0.5rem] fmtm-bg-white fmtm-overflow-hidden fmtm-cursor-pointer"
@@ -49,7 +50,7 @@ const OrganizationAdminList = () => {
           title={
             <ul>
               {organizationAdmins.slice(5).map((user) => (
-                <li key={user.id}>{user.username}</li>
+                <li key={user.user_sub}>{user.username}</li>
               ))}
             </ul>
           }

src/frontend/src/components/OrganizationDashboard/ProjectSummary.tsx

@@ -8,7 +8,7 @@ import Switch from '@/components/common/Switch';
 import ExploreProjectCard from '../home/ExploreProjectCard';
 import Pagination from '@/components/common/Pagination';
 import ProjectSummaryMap from '@/components/OrganizationDashboard/ProjectSummaryMap';
-import ProjectCardSkeleton from '@/components/home/ProjectCardSkeleton';
+import ProjectCardSkeleton from '@/components/Skeletons/Project/ProjectCardSkeleton';
 
 const VITE_API_URL = import.meta.env.VITE_API_URL;
 

src/frontend/src/components/ProjectDetails/Tabs/Comments.tsx

@@ -5,9 +5,9 @@ import { PostProjectComments, GetProjectComments } from '@/api/Project';
 import { useParams } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
 import AssetModules from '@/shared/AssetModules';
-import { ProjectCommentsSekeletonLoader } from '@/components/ProjectDetails/SkeletonLoader';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 import { CommonActions } from '@/store/slices/CommonSlice';
+import ProjectCommentsSekeleton from '@/components/Skeletons/ProjectDetails/ProjectCommentsSekeleton';
 
 const Comments = () => {
   const dispatch = useAppDispatch();
@@ -69,7 +69,7 @@ const Comments = () => {
         {projectGetCommentsLoading ? (
           <div className="fmtm-flex fmtm-flex-col fmtm-gap-4 fmtm-mb-1">
             {Array.from({ length: 8 }).map((_, i) => (
-              <ProjectCommentsSekeletonLoader key={i} />
+              <ProjectCommentsSekeleton key={i} />
             ))}
           </div>
         ) : (

src/frontend/src/components/ProjectDetails/Tabs/ProjectInfo.tsx

@@ -5,8 +5,8 @@ import ProjectIcon from '@/assets/images/project_icon.png';
 import { useAppSelector } from '@/types/reduxTypes';
 import { entity_state } from '@/types/enums';
 import { EntityOsmMap } from '@/models/project/projectModel';
-import { ProjectInfoSkeletonLoader } from '@/components/ProjectDetails/SkeletonLoader';
 import CoreModules from '@/shared/CoreModules';
+import ProjectInfoSkeleton from '@/components/Skeletons/ProjectDetails/ProjectInfoSkeleton';
 
 const ProjectInfo: React.FC = () => {
   const params = useParams();
@@ -56,10 +56,9 @@ const ProjectInfo: React.FC = () => {
     }
   }, [projectInfo, paraRef.current]);
 
-  if (projectDetailsLoading) return <ProjectInfoSkeletonLoader />;
+  if (projectDetailsLoading) return <ProjectInfoSkeleton />;
   return (
     <div className="fmtm-flex fmtm-flex-col fmtm-gap-5 fmtm-overflow-y-scroll scrollbar fmtm-pr-1 fmtm-pb-6">
-      {/* <ProjectInfoSkeletonLoader /> */}
       <div>
         <p className="fmtm-button fmtm-text-red-medium">Description</p>
         <div>

src/frontend/src/components/ProjectDetails/Tabs/TaskActivity.tsx

@@ -3,11 +3,12 @@ import React, { useEffect, useState } from 'react';
 import AssetModules from '@/shared/AssetModules';
 import { Feature } from 'ol';
 import { Polygon } from 'ol/geom';
-import { ActivitiesCardSkeletonLoader, ShowingCountSkeletonLoader } from '@/components/ProjectDetails/SkeletonLoader';
 import { useAppSelector } from '@/types/reduxTypes';
 import { projectTaskActivity } from '@/store/types/IProject';
 import { projectTaskBoundriesType } from '@/models/project/projectModel';
 import { task_state_labels } from '@/types/enums';
+import ActivitiesCardSkeleton from '@/components/Skeletons/ProjectDetails/ActivitiesCardSkeleton';
+import ShowingCountSkeleton from '@/components/Skeletons/ProjectDetails/ShowingCountSkeleton';
 
 type taskActivityType = {
   defaultTheme: any;
@@ -120,7 +121,7 @@ const TaskActivity = ({ defaultTheme, state, params, map }: taskActivityType) =>
           />
         </div>
         {projectActivityLoading ? (
-          <ShowingCountSkeletonLoader />
+          <ShowingCountSkeleton />
         ) : (
           <p className="fmtm-text-[#A8A6A6] fmtm-text-base fmtm-my-1">
             showing {taskHistories?.length} of {allActivities} activities
@@ -131,7 +132,7 @@ const TaskActivity = ({ defaultTheme, state, params, map }: taskActivityType) =>
         {projectActivityLoading ? (
           <div>
             {Array.from({ length: 10 }).map((_, i) => (
-              <ActivitiesCardSkeletonLoader key={i} />
+              <ActivitiesCardSkeleton key={i} />
             ))}
           </div>
         ) : taskHistories?.length === 0 ? (

src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx

@@ -14,7 +14,6 @@ import { CustomSelect } from '@/components/common/Select.js';
 import DateRangePicker from '@/components/common/DateRangePicker';
 import Table, { TableHeader } from '@/components/common/CustomTable';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/common/Dropdown';
-import { SubmissionsTableSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader.js';
 import UpdateReviewStatusModal from '@/components/ProjectSubmissions/UpdateReviewStatusModal';
 import { reviewStateData } from '@/constants/projectSubmissionsConstants';
 
@@ -30,6 +29,7 @@ import { SubmissionFormFieldsService, SubmissionTableService } from '@/api/Submi
 import filterParams from '@/utilfunctions/filterParams';
 import { camelToFlat } from '@/utilfunctions/commonUtils';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
+import SubmissionsTableSkeleton from '@/components/Skeletons/ProjectSubmissions.tsx/SubmissionsTableSkeleton';
 
 const SubmissionsTable = ({ toggleView }) => {
   useDocumentTitle('Submission Table');
@@ -410,7 +410,7 @@ const SubmissionsTable = ({ toggleView }) => {
         </div>
       </div>
       {submissionTableDataLoading || submissionFormFieldsLoading ? (
-        <SubmissionsTableSkeletonLoader />
+        <SubmissionsTableSkeleton />
       ) : (
         <Table data={submissionTableData?.results || []} flag="dashboard" onRowClick={() => {}} isLoading={false}>
           <TableHeader

src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx

@@ -4,10 +4,10 @@ import InputTextField from '@/components/common/InputTextField';
 import Button from '@/components/common/Button';
 import AssetModules from '@/shared/AssetModules.js';
 import CoreModules from '@/shared/CoreModules.js';
-import { TaskCardSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader';
 import { taskSubmissionInfoType } from '@/models/task/taskModel';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
+import TaskCardSkeleton from '@/components/Skeletons/ProjectSubmissions.tsx/TaskCardSkeleton';
 
 const TaskSubmissions = () => {
   const params = useParams();
@@ -114,7 +114,7 @@ const TaskSubmissions = () => {
           {taskLoading ? (
             <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
               {Array.from({ length: 10 }).map((_, i) => (
-                <TaskCardSkeletonLoader key={i} />
+                <TaskCardSkeleton key={i} />
               ))}
             </div>
           ) : filteredTaskInfo?.length > 0 ? (

src/frontend/src/components/Skeletons/ManageOrganization/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Skeleton } from '..';
+import FormFieldSkeletonLoader from '@/components/Skeletons/common/FormFieldSkeleton';
+
+const ManageOrganizationSkeleton = () => {
+  return (
+    <div className="sm:fmtm-flex-1 fmtm-flex fmtm-justify-center fmtm-flex-col sm:fmtm-flex-row fmtm-gap-5 sm:fmtm-overflow-hidden">
+      {/* left container */}
+      <div className="fmtm-bg-white fmtm-h-full fmtm-rounded-xl sm:fmtm-w-[17.5rem] fmtm-p-6 fmtm-flex sm:fmtm-flex-col fmtm-flex-wrap sm:fmtm-flex-nowrap fmtm-gap-x-5">
+        <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-mx-auto fmtm-gap-3 fmtm-mb-2 sm:fmtm-mb-6">
+          <Skeleton className="fmtm-w-[4.688rem] fmtm-h-[4.688rem] !fmtm-rounded-full" />
+          <Skeleton className="fmtm-w-[6.5rem] fmtm-h-[1.25rem]" />
+        </div>
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem] fmtm-mb-1" />
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem]" />
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem] fmtm-mt-auto" />
+      </div>
+
+      {/* right container */}
+      <div className="fmtm-bg-white fmtm-h-full fmtm-rounded-xl fmtm-w-full fmtm-max-w-[54rem] sm:fmtm-overflow-y-scroll sm:scrollbar fmtm-py-10 fmtm-px-9">
+        <FormFieldSkeletonLoader count={5} />
+      </div>
+    </div>
+  );
+};
+
+export default ManageOrganizationSkeleton;

src/frontend/src/components/Skeletons/ManageProject/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Skeleton } from '..';
+import FormFieldSkeletonLoader from '@/components/Skeletons/common/FormFieldSkeleton';
+
+const ManageProjectSkeleton = () => {
+  return (
+    <div className="sm:fmtm-flex-1 fmtm-flex fmtm-justify-center fmtm-flex-col sm:fmtm-flex-row fmtm-gap-5 sm:fmtm-overflow-hidden">
+      {/* left container */}
+      <div className="fmtm-bg-white fmtm-h-full fmtm-rounded-xl sm:fmtm-w-[17.5rem] fmtm-p-6 fmtm-flex sm:fmtm-flex-col fmtm-flex-wrap sm:fmtm-flex-nowrap fmtm-gap-x-5">
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem] fmtm-mb-1" />
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem] fmtm-mb-1" />
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem]" />
+        <Skeleton className="fmtm-w-full fmtm-h-[3rem] fmtm-mt-auto" />
+      </div>
+
+      {/* right container */}
+      <div className="fmtm-bg-white fmtm-h-full fmtm-rounded-xl fmtm-w-full fmtm-max-w-[54rem] sm:fmtm-overflow-y-scroll sm:scrollbar fmtm-py-10 fmtm-px-9">
+        <FormFieldSkeletonLoader count={5} />
+      </div>
+    </div>
+  );
+};
+
+export default ManageProjectSkeleton;