prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reduce flicker when loading settings from local storage

Browse source
This commit is contained in:
Jackson Harper 2024-06-13 16:11:16 +08:00
parent 2ead280152
commit 900d4b696b
2 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/web/components/templates/NavigationLayout.tsx
View file

@ -44,7 +44,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] =
useState(false)
const [showNavMenu, setShowNavMenu] = usePersistedState<boolean>({
const [showNavMenu, setShowNavMenu, isLoading] = usePersistedState<boolean>({
key: 'nav-show-menu',
isSessionStorage: false,
initialValue: true,
@ -111,6 +111,16 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
}
}, [showLogout])
if (isLoading) {
return (
<HStack
css={{ width: '100vw', height: '100vh' }}
distribution="start"
alignment="start"
></HStack>
)
}
return (
<HStack
css={{ width: '100vw', height: '100vh' }}
@ -133,7 +143,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
}}
/>
</SpanBox>
{showNavMenu && (
{!isLoading && showNavMenu && (
<NavigationMenu
section={props.section}
// eslint-disable-next-line @typescript-eslint/no-empty-function

6
packages/web/lib/hooks/usePersistedState.tsx
View file

@ -8,9 +8,10 @@ export function usePersistedState<T>({
key: string
initialValue: T
isSessionStorage?: boolean
}): [T, (x: T | ((prev: T) => T)) => void] {
}): [T, (x: T | ((prev: T) => T)) => void, boolean] {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [isLoading, setIsLoading] = useState(true)
const [storedValue, setStoredValue] = useState(initialValue)
useEffect(() => {
@ -27,6 +28,7 @@ export function usePersistedState<T>({
if (item) {
setStoredValue(JSON.parse(item))
}
setIsLoading(false)
} catch (error) {
// If error also return initialValue
console.log(error)
@ -56,5 +58,5 @@ export function usePersistedState<T>({
}
}
return [storedValue, setValue]
return [storedValue, setValue, isLoading]
}