1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-18 11:14:57 +02:00
unleash.unleash/frontend/src/component/personalDashboard/RemoteData.ts
Thomas Heartman a8206f5118
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)
2024-10-21 14:27:43 +02:00

29 lines
960 B
TypeScript

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>;
};