62df0f0445
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`](ae2f193d68/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>
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { ThemeProvider } from '@emotion/react';
|
|
import { createContext, useState } from 'react';
|
|
import {
|
|
ColorScheme,
|
|
THEME_DARK,
|
|
THEME_LIGHT,
|
|
ThemeContextProvider,
|
|
} from 'twenty-ui';
|
|
|
|
import { useSystemColorScheme } from '../hooks/useSystemColorScheme';
|
|
|
|
type BaseThemeProviderProps = {
|
|
children: JSX.Element | JSX.Element[];
|
|
};
|
|
|
|
export const ThemeSchemeContext = createContext<(theme: ColorScheme) => void>(
|
|
() => {},
|
|
);
|
|
|
|
export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => {
|
|
const systemColorScheme = useSystemColorScheme();
|
|
const [themeScheme, setThemeScheme] = useState(systemColorScheme);
|
|
|
|
document.documentElement.className =
|
|
themeScheme === 'Dark' ? 'dark' : 'light';
|
|
|
|
const theme = themeScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
|
|
|
|
return (
|
|
<ThemeSchemeContext.Provider value={setThemeScheme}>
|
|
<ThemeProvider theme={theme}>
|
|
<ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>
|
|
</ThemeProvider>
|
|
</ThemeSchemeContext.Provider>
|
|
);
|
|
};
|