Vite and useMediaQuery - layout shift? | Mantine | Page 1

Hey, from what I was available to find here, is that when using useMediaQuery it can cause layout shifts when using SSR (or even errors) but what when I'm using Vite and it is fully rendered on client side?

Here's a simple code that cause the layout to shift/display incorrect thing:

export const useLargeScreen = (): boolean => {
  const theme = useMantineTheme();
  return useMediaQuery(`(min-width: ${theme.breakpoints.lg})`);
};


type NavbarProps = {
  opened: boolean;
  toggle: () => void;
};

export const Navbar = ({ opened, toggle }: NavbarProps) => {
  const isLargeScreen = useLargeScreen();

  const navLinks = (
    <Stack>
      <NavLink label="Inbox" icon={<IconHome />} />
      <NavLink label="Newsletters" icon={<IconMail />} />
      <NavLink label="Archive" icon={<IconArchive />} />
    </Stack>
  );

  if (!isLargeScreen) {
    return (
      <Drawer opened={opened} onClose={toggle}>
        {navLinks}
      </Drawer>
    );
  }

  return (
    <Box style={{ width: opened ? 240 : 60 }}>
      {navLinks}
    </Box>
  );
};

Is it possible to make sure that useMediaQuery real value is "loaded" before displaying the content? I know that I could use regular breakpoints and that should help with this issue (I think/hope?) but I don't think it is really possible when I need to have two completely different components between mobile and large screens.

#Vite and useMediaQuery - layout shift?