fix: handle loading states for project details for a single project

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -122,7 +122,10 @@ const ProjectListItem: FC<{
     );
 };
 
-type MyProjectsState = 'no projects' | 'projects' | 'projects with error';
+type MyProjectsState =
+    | 'no projects'
+    | 'projects'
+    | 'projects with error or loading';
 
 export const MyProjects = forwardRef<
     HTMLDivElement,
@@ -149,7 +152,7 @@ export const MyProjects = forwardRef<
         const state: MyProjectsState = projects.length
             ? personalDashboardProjectDetails
                 ? 'projects'
-                : 'projects with error'
+                : 'projects with error or loading'
             : 'no projects';
 
         const activeProjectStage =
@@ -190,7 +193,7 @@ export const MyProjects = forwardRef<
                         ),
                     };
 
-                case 'projects with error':
+                case 'projects with error or loading':
                     return {
                         list: (
                             <StyledList>
@@ -206,8 +209,19 @@ export const MyProjects = forwardRef<
                                 ))}
                             </StyledList>
                         ),
-                        box1: <DataError project={activeProject} />,
+                        box1: (
-                        box2: <ContactAdmins admins={admins} />,
+                            <div data-loading>
+                                <DataError
+                                    data-loading
+                                    project={activeProject}
+                                />
+                            </div>
+                        ),
+                        box2: (
+                            <div data-loading>
+                                <ContactAdmins admins={admins} />
+                            </div>
+                        ),
                     };
 
                 case 'projects': {

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -130,15 +130,10 @@ export const PersonalDashboard = () => {
         splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
     );
 
-    const { personalDashboardProjectDetails, error: detailsError } =
+    const { personalDashboardProjectDetails, loading: detailsLoading } =
         usePersonalDashboardProjectDetails(activeProject);
 
-    const activeProjectStage =
+    const loadingProjectDetailsRef = useLoading(detailsLoading);
-        personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';
-
-    const projectStageRef = useLoading(
-        !detailsError && activeProjectStage === 'loading',
-    );
 
     return (
         <MainContent>
@@ -192,7 +187,7 @@ export const PersonalDashboard = () => {
                     <MyProjects
                         owners={personalDashboard?.projectOwners ?? []}
                         admins={personalDashboard?.admins ?? []}
-                        ref={projectStageRef}
+                        ref={loadingProjectDetailsRef}
                         projects={projects}
                         activeProject={activeProject || ''}
                         setActiveProject={setActiveProject}

frontend/src/component/personalDashboard/ProjectDetailsError.tsx

@@ -5,10 +5,7 @@ import { ActionBox } from './ActionBox';
 
 export const DataError: FC<{ project: string }> = ({ project }) => {
     return (
-        <ActionBox
+        <ActionBox title={`Couldn't fetch data for project "${project}".`}>
-            data-loading
-            title={`Couldn't fetch data for project "${project}".`}
-        >
             <p>
                 The API request to get data for this project returned with an
                 error.

frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx

@@ -51,7 +51,7 @@ export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
     const firstRoles = roles.slice(0, 3);
     const extraRoles = roles.slice(3);
     return (
-        <Wrapper>
+        <Wrapper data-loading>
             <InfoSection>
                 {roles.length > 0 ? (
                     <>