use-viewport-size hook has incorrect initial value

[GZTimeWalker]

What package has an issue

@mantine/core

Describe the bug

After upgrade to 5.1.4, AppShell.Header works incorrectly.

  <AppShell
      padding={padding ?? 'md'}
      fixed
      navbar={<AppNavbar />}
      header={<AppHeader />}
    >
      {/* others... */}
    </AppShell>

const useStyles = createStyles((theme) => {
  return {
    header: {
      backgroundColor: theme.colors.gray[8],

      [theme.fn.largerThan('xs')]: {
        display: 'none',
      },
    },
  }
})

const AppHeader: FC = () => {
  const { classes, theme } = useStyles()
  const view = useViewportSize()

  const showHeader = view.width < theme.breakpoints.xs
  return (
    <Header
      height={showHeader ? 70 : 0}
      style={{ width: '100%' }}
      className={classes.header}
    >
      <Group style={{ height: '100%' }} p="0 1rem">
        <LogoHeader />
      </Group>
    </Header>
  )
}

When I open the page, --mantine-header-height is set to 70px, but it should be 0.
When I changed the size of window, it becomes normal again.
It also works fine when I change the width to less than theme.breakpoints.xs and change it back to the original.

What version of @mantine/hooks page do you have in package.json?

^5.1.4

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[rtivital]

Thanks for reporting, the issue will be fixed in next patch. Note that the approach with use-viewport size will not work well if you have ssr.

[rtivital]

Fixed in 5.1.5