SW-5331 Show loading page when determining module projects (#2607)

terraware · May 13, 2024 · 9434e4a · 9434e4a
1 parent 754d895
commit 9434e4a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/providers/Participant/ParticipantContext.tsx b/src/providers/Participant/ParticipantContext.tsx
@@ -11,8 +11,8 @@ export type ParticipantData = {
   moduleProjects: Project[];
   modules?: Module[];
   participantProjects: Project[];
-  orgHasModules: boolean;
-  orgHasParticipants: boolean;
+  orgHasModules: boolean | undefined; // undefined for unknown, useful for showing loading spinner
+  orgHasParticipants: boolean | undefined; // undefined for unknown, useful for showing loading spinner
   setCurrentParticipantProject: (projectId: string | number) => void;
 };
 

diff --git a/src/providers/Participant/ParticipantProvider.tsx b/src/providers/Participant/ParticipantProvider.tsx
@@ -22,22 +22,22 @@ const ParticipantProvider = ({ children }: Props) => {
   const { selectedOrganization } = useOrganization();
   const { activeLocale } = useLocalization();
 
+  const [activeModules, setActiveModules] = useState<Module[]>([]);
   const [currentParticipantProject, setCurrentParticipantProject] = useState<Project>();
   const [participantProjects, setParticipantProjects] = useState<Project[]>([]);
   const [moduleProjects, setModuleProjects] = useState<Project[]>([]);
   const [modules, setModules] = useState<Module[]>([]);
-  const [activeModules, setActiveModules] = useState<Module[]>([]);
+  const [orgHasModules, setOrgHasModules] = useState<boolean | undefined>(undefined);
+  const [orgHasParticipants, setOrgHasParticipants] = useState<boolean | undefined>(undefined);
 
   const [listModulesRequest, setListModulesRequest] = useState<string>('');
   const [listModuleProjectsRequest, setListModuleProjectsRequest] = useState<string>('');
 
+  const moduleProjectsList = useAppSelector(selectModuleProjects(listModuleProjectsRequest));
   const participant = useAppSelector(selectParticipant(currentParticipantProject?.participantId || -1));
-
   const projectModuleList = useAppSelector(selectProjectModuleList(listModulesRequest));
   const projects = useAppSelector(selectProjects);
 
-  const moduleProjectsList = useAppSelector(selectModuleProjects(listModuleProjectsRequest));
-
   const _setCurrentParticipantProject = useCallback(
     (projectId: string | number) => {
       setCurrentParticipantProject(participantProjects.find((project) => project.id === Number(projectId)));
@@ -49,16 +49,18 @@ const ParticipantProvider = ({ children }: Props) => {
     activeModules,
     moduleProjects,
     modules,
+    orgHasModules,
+    orgHasParticipants,
     participantProjects,
-    orgHasParticipants: false,
-    orgHasModules: false,
     setCurrentParticipantProject: _setCurrentParticipantProject,
   });
 
   useEffect(() => {
     if (selectedOrganization && activeLocale) {
       setCurrentParticipantProject(undefined);
       setModuleProjects([]);
+      setOrgHasModules(undefined);
+      setOrgHasParticipants(undefined);
       setParticipantProjects([]);
       dispatch(requestProjects(selectedOrganization.id, activeLocale));
     }
@@ -67,6 +69,7 @@ const ParticipantProvider = ({ children }: Props) => {
   useEffect(() => {
     const nextParticipantProjects = (projects || []).filter((project) => !!project.participantId);
     setParticipantProjects(nextParticipantProjects);
+    setOrgHasParticipants(nextParticipantProjects.length > 0);
   }, [projects]);
 
   useEffect(() => {
@@ -77,11 +80,7 @@ const ParticipantProvider = ({ children }: Props) => {
   }, [selectedOrganization, dispatch]);
 
   useEffect(() => {
-    if (!projectModuleList) {
-      return;
-    }
-
-    if (projectModuleList.status === 'success') {
+    if (projectModuleList && projectModuleList.status === 'success') {
       const nextModules = projectModuleList.data ?? [];
       setModules(nextModules);
       setActiveModules(nextModules.filter((module) => module.isActive === true));
@@ -95,6 +94,7 @@ const ParticipantProvider = ({ children }: Props) => {
         .filter((project): project is Project => !!project);
 
       setModuleProjects(nextModuleProjects);
+      setOrgHasModules(nextModuleProjects.length > 0);
 
       // Assign the first project with modules as the current participant project
       if (nextModuleProjects.length > 0 && !currentParticipantProject) {
@@ -119,15 +119,17 @@ const ParticipantProvider = ({ children }: Props) => {
       moduleProjects,
       modules,
       participantProjects,
-      orgHasModules: moduleProjects.length > 0,
-      orgHasParticipants: participantProjects.length > 0,
+      orgHasModules: orgHasModules,
+      orgHasParticipants: orgHasParticipants,
       setCurrentParticipantProject: _setCurrentParticipantProject,
     });
   }, [
     activeModules,
     currentParticipantProject,
     moduleProjects,
     modules,
+    orgHasModules,
+    orgHasParticipants,
     participant,
     participantProjects,
     _setCurrentParticipantProject,

diff --git a/src/scenes/Home/index.tsx b/src/scenes/Home/index.tsx
@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
+import Page from 'src/components/Page';
 import { useParticipantData } from 'src/providers/Participant/ParticipantContext';
 import useDeviceInfo from 'src/utils/useDeviceInfo';
 
@@ -40,10 +41,12 @@ export default function Home(): JSX.Element {
   const { orgHasModules } = useParticipantData();
   const classes = useStyles({ isMobile });
 
-  const homeScreen = useMemo(
-    (): JSX.Element => (orgHasModules ? <ParticipantHomeView /> : <TerrawareHomeView />),
-    [orgHasModules]
-  );
+  const homeScreen = useMemo((): JSX.Element => {
+    if (orgHasModules === undefined) {
+      return <Page isLoading={true} />;
+    }
+    return orgHasModules ? <ParticipantHomeView /> : <TerrawareHomeView />;
+  }, [orgHasModules]);
 
   return <main className={classes.main}>{homeScreen}</main>;
 }