From d4313dd657a5f53609758e23b10da1e2e342b6f7 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 14 Mar 2024 16:30:27 +0000
Subject: [PATCH] Pass ssr: false to useMediaQuery

Otherwise we needlessly render assuming false which causes rerenders
with visual change at start-up and on language change.

Not Vite related, we need to rescue this if we abandon the PR.
---
 src/documentation/common/DocumentationTopLevelItem.tsx | 8 ++++----
 src/editor/EditorArea.tsx                              | 2 +-
 src/project/ProjectActionBar.tsx                       | 2 +-
 src/workbench/Workbench.tsx                            | 4 +++-
 src/workbench/connect-dialogs/ConnectHelpDialog.tsx    | 2 +-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/documentation/common/DocumentationTopLevelItem.tsx b/src/documentation/common/DocumentationTopLevelItem.tsx
index 5926744fd..d6c4f945c 100644
--- a/src/documentation/common/DocumentationTopLevelItem.tsx
+++ b/src/documentation/common/DocumentationTopLevelItem.tsx
@@ -41,8 +41,8 @@ const DocumentationTopLevelItem = ({
   type,
 }: DocumentationTopLevelItemProps) => {
   const intl = useIntl();
-  const [isShortWindow] = useMediaQuery(heightMd);
-  const [isWideScreen] = useMediaQuery(widthXl);
+  const [isShortWindow] = useMediaQuery(heightMd, { ssr: false });
+  const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
   return (
     <DocumentationListItem
       onClick={onForward}
@@ -92,8 +92,8 @@ const DocumentationListItem = ({
   type,
   ...props
 }: DocumentationListItemProps) => {
-  const [isShortWindow] = useMediaQuery(heightMd);
-  const [isWideScreen] = useMediaQuery(widthXl);
+  const [isShortWindow] = useMediaQuery(heightMd, { ssr: false });
+  const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
   const my =
     type === "reference"
       ? isShortWindow || !isWideScreen
diff --git a/src/editor/EditorArea.tsx b/src/editor/EditorArea.tsx
index 539852ae0..700741c41 100644
--- a/src/editor/EditorArea.tsx
+++ b/src/editor/EditorArea.tsx
@@ -39,7 +39,7 @@ const EditorArea = React.forwardRef(
     simulatorButtonRef: ForwardedRef<HTMLButtonElement>
   ) => {
     const intl = useIntl();
-    const [isWideScreen] = useMediaQuery(widthXl);
+    const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
     return (
       <Flex
         height="100%"
diff --git a/src/project/ProjectActionBar.tsx b/src/project/ProjectActionBar.tsx
index 98b19cd66..b8ea31873 100644
--- a/src/project/ProjectActionBar.tsx
+++ b/src/project/ProjectActionBar.tsx
@@ -19,7 +19,7 @@ const ProjectActionBar = React.forwardRef(
     { sendButtonRef, ...props }: ProjectActionBarProps,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
-    const [isWideScreen] = useMediaQuery(widthXl);
+    const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
     const size = "lg";
     return (
       <HStack
diff --git a/src/workbench/Workbench.tsx b/src/workbench/Workbench.tsx
index bd797d132..e5b6a903f 100644
--- a/src/workbench/Workbench.tsx
+++ b/src/workbench/Workbench.tsx
@@ -96,7 +96,9 @@ const Workbench = () => {
       handleSidebarCollapse();
     }
   }, [handleSidebarCollapse]);
-  const [hideSideBarMediaQueryValue] = useMediaQuery(hideSidebarMediaQuery);
+  const [hideSideBarMediaQueryValue] = useMediaQuery(hideSidebarMediaQuery, {
+    ssr: false,
+  });
   useEffect(() => {
     if (hideSideBarMediaQueryValue) {
       handleSidebarCollapse();
diff --git a/src/workbench/connect-dialogs/ConnectHelpDialog.tsx b/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
index ae7a35599..7ac0280c0 100644
--- a/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
+++ b/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
@@ -19,7 +19,7 @@ import selectMicrobit from "./select-microbit.png";
 
 const ConnectHelpDialogBody = () => {
   const intl = useIntl();
-  const [isDesktop] = useMediaQuery("(min-width: 768px)");
+  const [isDesktop] = useMediaQuery("(min-width: 768px)", { ssr: false });
   return (
     <VStack
       width="auto"