fix: remove unnecesary render caused by useMediaQuery hook

Stefan Latsarevichrequested to merge
s.latsarevich/k3k-web-frontend:2139-use-media-query-flickering into main

Changes

  1. Replaced all instances of useMediaQuery(theme.breakpoints.down('md')); with useIsMobile()
  2. Replaced all instances of useMediaQuery(theme.breakpoints.up('md')); with useIsDesktop()
  3. Add { noSsr: true } option in both useIsDesktop() and useIsMobile() hooks.
  4. Add { noSsr: true } option to all custom useMediaQuery hooks.

Important

I am aware that there are instances where we mix naming and actual query, like where we label "isMobile" query that is under sm. We have to standardize this and name queries that don't fit custom desktop and mobile hooks differently, but this is out of the ticket scope.

Closes #2139

Merge request reports