Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix hydration error (#1296)

Browse source
This commit is contained in:
Brandon Pereira 2025-10-25 18:01:43 +02:00 committed by GitHub
parent 24b5477d62
commit ab7af41f7e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wise-horses-swim.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
avoid hydration errors when app loads if nav is collapsed

39
packages/app/src/AppNav.tsx
View file

@ -23,7 +23,7 @@ import {
Loader,
ScrollArea,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import {
useCreateDashboard,
@ -50,7 +50,7 @@ import OnboardingChecklist from './OnboardingChecklist';
import { useSavedSearches, useUpdateSavedSearch } from './savedSearch';
import type { SavedSearch, ServerDashboard } from './types';
import { UserPreferencesModal } from './UserPreferencesModal';
import { useLocalStorage, useWindowSize } from './utils';
import { useWindowSize } from './utils';
import styles from '../styles/AppNav.module.scss';
@ -212,7 +212,10 @@ const AppNavLinkGroups = <T extends AppNavLinkItem>({
}) => {
const [collapsedGroups, setCollapsedGroups] = useLocalStorage<
Record<string, boolean>
>(`collapsedGroups-${name}`, {});
>({
key: `collapsedGroups-${name}`,
defaultValue: {},
});
const handleToggleGroup = useCallback(
(groupName: string) => {
@ -375,20 +378,21 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
const { data: meData } = api.useMe();
const [isSearchExpanded, setIsSearchExpanded] = useLocalStorage(
'isSearchExpanded',
true,
);
const [isDashboardsExpanded, setIsDashboardExpanded] = useLocalStorage(
'isDashboardsExpanded',
true,
);
const [isSearchExpanded, setIsSearchExpanded] = useLocalStorage<boolean>({
key: 'isSearchExpanded',
defaultValue: true,
});
const [isDashboardsExpanded, setIsDashboardExpanded] =
useLocalStorage<boolean>({
key: 'isDashboardsExpanded',
defaultValue: true,
});
const { width } = useWindowSize();
const [isPreferCollapsed, setIsPreferCollapsed] = useLocalStorage<boolean>(
'isNavCollapsed',
false,
);
const [isPreferCollapsed, setIsPreferCollapsed] = useLocalStorage<boolean>({
key: 'isNavCollapsed',
defaultValue: false,
});
const isSmallScreen = (width ?? 1000) < 900;
const isCollapsed = isSmallScreen || isPreferCollapsed;
@ -434,7 +438,10 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
});
const [isDashboardsPresetsCollapsed, setDashboardsPresetsCollapsed] =
useLocalStorage('isDashboardsPresetsCollapsed', false);
useLocalStorage<boolean>({
key: 'isDashboardsPresetsCollapsed',
defaultValue: false,
});
const savedSearchesResultsRef = useRef<HTMLDivElement>(null);
const dashboardsResultsRef = useRef<HTMLDivElement>(null);