Display a generic fallback component when initial config load fails (#8588)
Fixes: #8487 #5027 1. Summary The purpose of these changes is to elevate the dev/user experience when the initial config load call fails for whatever reason by displaying a fallback component. 2. Solution I ended up making more changes than I initially planned. I had to update the order of the contexts a bit because `GenericErrorFallback` is dependent on `AppThemeProvider` for styling and `AppThemeProvider` is dependent on `ObjectMetadataItemsProvider` for [`useObjectMetadataItem`](https://github.com/khuddite/twenty/blob/ae2f193d68c6168e4c8323297d58f6dbc1de9fdf/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts#L22) hook (`AppThemeProvider` -> `useColorScheme` -> `useUpdateOneRecord` -> `useObjectMetadataItem`). I had to create a wrapper component for `AppThemeProvider` and stylize it in a way that it looks responsive on both mobile and desktop devices. Finally, I had to introduce the `isErrored` flag to differentiate the loading and error states. There are some improvements we can make later - - Display a loading state for the initial config load - Implement a refetch logic for the initial config loading failure 3. Recording https://github.com/user-attachments/assets/c2f43573-8006-4118-8e18-8576099d78fd https://github.com/user-attachments/assets/9c5853d3-539b-4880-aa38-c416c3e13594 --------- Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
@@ -0,0 +1,12 @@
|
||||
import { createState } from 'twenty-ui';
|
||||
|
||||
type ClientConfigApiStatus = {
|
||||
isLoaded: boolean;
|
||||
isErrored: boolean;
|
||||
error?: Error;
|
||||
};
|
||||
|
||||
export const clientConfigApiStatusState = createState<ClientConfigApiStatus>({
|
||||
key: 'clientConfigApiStatus',
|
||||
defaultValue: { isLoaded: false, isErrored: false, error: undefined },
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { createState } from 'twenty-ui';
|
||||
|
||||
export const isClientConfigLoadedState = createState<boolean>({
|
||||
key: 'isClientConfigLoadedState',
|
||||
defaultValue: false,
|
||||
});
|
||||
Reference in New Issue
Block a user