fix: handle loading states for project details for a single project (#8492)

This PR updates the use of references on the project details page to
handle the loading state for a single project.

Now, if a project is loading, it'll show skeleton loaders for the
relevant boxes:


![image](https://github.com/user-attachments/assets/a156cc88-e4bf-421a-8afe-2b46e26d5544)

I've also updated the state type we use for this to be more accurate. Shamelessly
stolen from Elm.

```ts
type RemoteData<T> = 
  | { state: 'error', error: Error } 
  | { state: 'loading' } 
  | { state: 'success', data: T } 
```

After refactoring: 

![image](https://github.com/user-attachments/assets/03d655de-1ab8-4289-9f0c-d158ede8e116)

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -1,9 +1,11 @@
+import type { RemoteData } from './RemoteData';
 import {
     Box,
     IconButton,
     ListItem,
     ListItemButton,
     Typography,
+    styled,
 } from '@mui/material';
 import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
 import LinkIcon from '@mui/icons-material/ArrowForward';
@@ -11,9 +13,10 @@ import { ProjectSetupComplete } from './ProjectSetupComplete';
 import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
 import { LatestProjectEvents } from './LatestProjectEvents';
 import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
-import { type ReactNode, forwardRef, useEffect, useRef, type FC } from 'react';
+import { type ReactNode, useEffect, useRef, type FC } from 'react';
 import type {
     PersonalDashboardProjectDetailsSchema,
+    PersonalDashboardProjectDetailsSchemaRolesItem,
     PersonalDashboardSchemaAdminsItem,
     PersonalDashboardSchemaProjectOwnersItem,
     PersonalDashboardSchemaProjectsItem,
@@ -33,6 +36,7 @@ import { ContactAdmins, DataError } from './ProjectDetailsError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Link } from 'react-router-dom';
 import { ActionBox } from './ActionBox';
+import useLoading from 'hooks/useLoading';
 import { NoProjectsContactAdmin } from './NoProjectsContactAdmin';
 import { AskOwnerToAddYouToTheirProject } from './AskOwnerToAddYouToTheirProject';
 
@@ -69,6 +73,10 @@ const ActiveProjectDetails: FC<{
     );
 };
 
+const SkeletonDiv = styled('div')({
+    height: '80%',
+});
+
 const ProjectListItem: FC<{
     project: PersonalDashboardSchemaProjectsItem;
     selected: boolean;
@@ -122,160 +130,116 @@ const ProjectListItem: FC<{
     );
 };
 
-type MyProjectsState = 'no projects' | 'projects' | 'projects with error';
+export const MyProjects: React.FC<{
-
-export const MyProjects = forwardRef<
-    HTMLDivElement,
-    {
     projects: PersonalDashboardSchemaProjectsItem[];
-        personalDashboardProjectDetails?: PersonalDashboardProjectDetailsSchema;
+    personalDashboardProjectDetails: RemoteData<PersonalDashboardProjectDetailsSchema>;
     activeProject: string;
     setActiveProject: (project: string) => void;
     admins: PersonalDashboardSchemaAdminsItem[];
     owners: PersonalDashboardSchemaProjectOwnersItem[];
-    }
+}> = ({
->(
-    (
-        {
     projects,
     personalDashboardProjectDetails,
     setActiveProject,
     activeProject,
     admins,
     owners,
-        },
+}) => {
-        ref,
+    const ref = useLoading(personalDashboardProjectDetails.state === 'loading');
-    ) => {
-        const state: MyProjectsState = projects.length
-            ? personalDashboardProjectDetails
-                ? 'projects'
-                : 'projects with error'
-            : 'no projects';
-
-        const activeProjectStage =
-            personalDashboardProjectDetails?.onboardingStatus.status ??
-            'loading';
-        const setupIncomplete =
-            activeProjectStage === 'onboarding-started' ||
-            activeProjectStage === 'first-flag-created';
 
     const getGridContents = (): {
         list: ReactNode;
         box1: ReactNode;
         box2: ReactNode;
     } => {
-            switch (state) {
+        if (projects.length === 0) {
-                case 'no projects':
             return {
                 list: (
                     <ActionBox>
                         <Typography>
-                                    You don't currently have access to any
+                            You don't currently have access to any projects in
-                                    projects in the system.
+                            the system.
                         </Typography>
                         <Typography>
                             To get started, you can{' '}
                             <Link to='/projects?create=true'>
                                 create your own project
                             </Link>
-                                    . Alternatively, you can review the
+                            . Alternatively, you can review the available
-                                    available projects in the system and ask the
+                            projects in the system and ask the owner for access.
-                                    owner for access.
                         </Typography>
                     </ActionBox>
                 ),
                 box1: <NoProjectsContactAdmin admins={admins} />,
-                        box2: (
+                box2: <AskOwnerToAddYouToTheirProject owners={owners} />,
-                            <AskOwnerToAddYouToTheirProject owners={owners} />
-                        ),
             };
+        }
 
-                case 'projects with error':
+        const list = (
-                    return {
-                        list: (
             <StyledList>
                 {projects.map((project) => (
                     <ProjectListItem
                         key={project.id}
                         project={project}
                         selected={project.id === activeProject}
-                                        onClick={() =>
+                        onClick={() => setActiveProject(project.id)}
-                                            setActiveProject(project.id)
-                                        }
                     />
                 ))}
             </StyledList>
-                        ),
+        );
-                        box1: <DataError project={activeProject} />,
-                        box2: <ContactAdmins admins={admins} />,
-                    };
 
-                case 'projects': {
+        const [box1, box2] = (() => {
-                    const box1 = (() => {
+            switch (personalDashboardProjectDetails.state) {
-                        if (
+                case 'success': {
-                            activeProjectStage === 'onboarded' &&
+                    const activeProjectStage =
-                            personalDashboardProjectDetails
+                        personalDashboardProjectDetails.data.onboardingStatus
-                        ) {
+                            .status ?? 'loading';
-                            return (
+                    const setupIncomplete =
+                        activeProjectStage === 'onboarding-started' ||
+                        activeProjectStage === 'first-flag-created';
+
+                    if (activeProjectStage === 'onboarded') {
+                        return [
                             <ProjectSetupComplete
                                 project={activeProject}
                                 insights={
-                                        personalDashboardProjectDetails.insights
+                                    personalDashboardProjectDetails.data
+                                        .insights
                                 }
-                                />
+                            />,
-                            );
-                        } else if (
-                            activeProjectStage === 'onboarding-started' ||
-                            activeProjectStage === 'loading'
-                        ) {
-                            return <CreateFlag project={activeProject} />;
-                        } else if (
-                            activeProjectStage === 'first-flag-created'
-                        ) {
-                            return <ExistingFlag project={activeProject} />;
-                        }
-                    })();
-
-                    const box2 = (() => {
-                        if (
-                            activeProjectStage === 'onboarded' &&
-                            personalDashboardProjectDetails
-                        ) {
-                            return (
                             <LatestProjectEvents
                                 latestEvents={
-                                        personalDashboardProjectDetails.latestEvents
+                                    personalDashboardProjectDetails.data
+                                        .latestEvents
                                 }
-                                />
+                            />,
-                            );
+                        ];
-                        } else if (
+                    } else if (setupIncomplete) {
-                            setupIncomplete ||
+                        return [
-                            activeProjectStage === 'loading'
+                            <CreateFlag project={activeProject} />,
-                        ) {
+                            <ConnectSDK project={activeProject} />,
-                            return <ConnectSDK project={activeProject} />;
+                        ];
+                    } else {
+                        return [
+                            <ExistingFlag project={activeProject} />,
+                            <ConnectSDK project={activeProject} />,
+                        ];
+                    }
+                }
+                case 'error':
+                    return [
+                        <DataError project={activeProject} />,
+                        <ContactAdmins admins={admins} />,
+                    ];
+                default: // loading
+                    return [
+                        <SkeletonDiv data-loading />,
+                        <SkeletonDiv data-loading />,
+                    ];
             }
         })();
 
-                    return {
+        return { list, box1, box2 };
-                        list: (
-                            <StyledList>
-                                {projects.map((project) => (
-                                    <ProjectListItem
-                                        key={project.id}
-                                        project={project}
-                                        selected={project.id === activeProject}
-                                        onClick={() =>
-                                            setActiveProject(project.id)
-                                        }
-                                    />
-                                ))}
-                            </StyledList>
-                        ),
-                        box1,
-                        box2,
-                    };
-                }
-            }
     };
 
     const { list, box1, box2 } = getGridContents();
@@ -289,19 +253,22 @@ export const MyProjects = forwardRef<
                 <GridItem gridArea='owners'>
                     <RoleAndOwnerInfo
                         roles={
-                                personalDashboardProjectDetails?.roles.map(
+                            personalDashboardProjectDetails.state === 'success'
-                                    (role) => role.name,
+                                ? personalDashboardProjectDetails.data.roles.map(
-                                ) ?? []
+                                      (
+                                          role: PersonalDashboardProjectDetailsSchemaRolesItem,
+                                      ) => role.name,
+                                  )
+                                : []
                         }
                         owners={
-                                personalDashboardProjectDetails?.owners ?? [
+                            personalDashboardProjectDetails.state === 'success'
-                                    { ownerType: 'user', name: '?' },
+                                ? personalDashboardProjectDetails.data.owners
-                                ]
+                                : [{ ownerType: 'user', name: '?' }]
                         }
                     />
                 </GridItem>
             </ProjectGrid>
         </ContentGridContainer>
     );
-    },
+};
-);

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -11,7 +11,6 @@ import { WelcomeDialog } from './WelcomeDialog';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
 import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
-import useLoading from '../../hooks/useLoading';
 import { MyProjects } from './MyProjects';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
@@ -20,6 +19,7 @@ import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash';
 import { useDashboardState } from './useDashboardState';
 import { MyFlags } from './MyFlags';
 import { usePageTitle } from 'hooks/usePageTitle';
+import { fromPersonalDashboardProjectDetailsOutput } from './RemoteData';
 
 const WelcomeSection = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -130,14 +130,9 @@ export const PersonalDashboard = () => {
         splash?.personalDashboardKeyConcepts ? 'closed' : 'open',
     );
 
-    const { personalDashboardProjectDetails, error: detailsError } =
+    const personalDashboardProjectDetails =
-        usePersonalDashboardProjectDetails(activeProject);
+        fromPersonalDashboardProjectDetailsOutput(
-
+            usePersonalDashboardProjectDetails(activeProject),
-    const activeProjectStage =
-        personalDashboardProjectDetails?.onboardingStatus.status ?? 'loading';
-
-    const projectStageRef = useLoading(
-        !detailsError && activeProjectStage === 'loading',
         );
 
     return (
@@ -192,7 +187,6 @@ export const PersonalDashboard = () => {
                     <MyProjects
                         owners={personalDashboard?.projectOwners ?? []}
                         admins={personalDashboard?.admins ?? []}
-                        ref={projectStageRef}
                         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/RemoteData.ts

@@ -0,0 +1,28 @@
+import type { IPersonalDashboardProjectDetailsOutput } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
+import type { PersonalDashboardProjectDetailsSchema } from 'openapi';
+
+export type RemoteData<T> =
+    | { state: 'error'; error: Error }
+    | { state: 'loading' }
+    | { state: 'success'; data: T };
+
+export const fromPersonalDashboardProjectDetailsOutput = ({
+    personalDashboardProjectDetails,
+    error,
+}: IPersonalDashboardProjectDetailsOutput): RemoteData<PersonalDashboardProjectDetailsSchema> => {
+    const converted = error
+        ? {
+              state: 'error',
+              error,
+          }
+        : personalDashboardProjectDetails
+          ? {
+                state: 'success',
+                data: personalDashboardProjectDetails,
+            }
+          : {
+                state: 'loading' as const,
+            };
+
+    return converted as RemoteData<PersonalDashboardProjectDetailsSchema>;
+};

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 ? (
                     <>