Less initial page loading flashiness

Author: joepio

data-browser/src/components/SideBar/index.tsx

@@ -19,7 +19,10 @@ export function SideBar(): JSX.Element {
   const { drive, sideBarLocked, setSideBarLocked } = useSettings();
   const [ref, hoveringOverSideBar] = useHover<HTMLElement>(sideBarLocked);
   // Check if the window is small enough to hide the sidebar
-  const isWideScreen = useMediaQuery(`(min-width: ${SIDEBAR_TOGGLE_WIDTH}px)`);
+  const isWideScreen = useMediaQuery(
+    `(min-width: ${SIDEBAR_TOGGLE_WIDTH}px)`,
+    true,
+  );
 
   const { size, targetRef, dragAreaRef, isDragging } = useResizable(
     300,

data-browser/src/hooks/useMediaQuery.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
 /** Watches a media query and returns a statefull result. */
-export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false);
+export function useMediaQuery(query: string, def = false): boolean {
+  const [matches, setMatches] = useState(def);
 
   useEffect(() => {
     if (!window.matchMedia) {