From 3bc9c9ae8ac70dca90362016108379aaaabd7cbd Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 21 Oct 2024 12:10:07 +0200
Subject: [PATCH] fix: handle loading states for project details for a single
 project

---
 .../personalDashboard/MyProjects.tsx          | 24 +++++++++++++++----
 .../personalDashboard/PersonalDashboard.tsx   | 11 +++------
 .../personalDashboard/ProjectDetailsError.tsx |  5 +---
 .../personalDashboard/RoleAndOwnerInfo.tsx    |  2 +-
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx
index d509a93c37c3..06e9fd898c88 100644
--- a/frontend/src/component/personalDashboard/MyProjects.tsx
+++ b/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} />,
-                        box2: <ContactAdmins admins={admins} />,
+                        box1: (
+                            <div data-loading>
+                                <DataError
+                                    data-loading
+                                    project={activeProject}
+                                />
+                            </div>
+                        ),
+                        box2: (
+                            <div data-loading>
+                                <ContactAdmins admins={admins} />
+                            </div>
+                        ),
                     };
 
                 case 'projects': {
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index bba512e01923..a90bd95987e2 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/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 =
-        personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';
-
-    const projectStageRef = useLoading(
-        !detailsError && activeProjectStage === 'loading',
-    );
+    const loadingProjectDetailsRef = useLoading(detailsLoading);
 
     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}
diff --git a/frontend/src/component/personalDashboard/ProjectDetailsError.tsx b/frontend/src/component/personalDashboard/ProjectDetailsError.tsx
index 22a3da57286c..99c34e06da8c 100644
--- a/frontend/src/component/personalDashboard/ProjectDetailsError.tsx
+++ b/frontend/src/component/personalDashboard/ProjectDetailsError.tsx
@@ -5,10 +5,7 @@ import { ActionBox } from './ActionBox';
 
 export const DataError: FC<{ project: string }> = ({ project }) => {
     return (
-        <ActionBox
-            data-loading
-            title={`Couldn't fetch data for project "${project}".`}
-        >
+        <ActionBox title={`Couldn't fetch data for project "${project}".`}>
             <p>
                 The API request to get data for this project returned with an
                 error.
diff --git a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx b/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
index fce80ebf17ed..f0b62053e608 100644
--- a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
+++ b/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 ? (
                     <>