fix unnecessary re-rendering of ThemeToggle

components/ThemeToggle/ThemeToggle.tsx

@@ -24,20 +24,20 @@ export type ThemeToggleProps = {
 
 const ThemeToggle = ({ className }: ThemeToggleProps) => {
   const hasMounted = useHasMounted();
-  const isFirstMount = useFirstMountState();
   const { activeTheme, setTheme } = useTheme();
-  const hasNoMotionPreference = useMedia("(prefers-reduced-motion: no-preference)", false);
+  const isFirstMount = useFirstMountState();
+  const prefersReducedMotion = useMedia("(prefers-reduced-motion: reduce)", false);
   const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG
 
   // default to light since `activeTheme` might be undefined
   const safeTheme = activeTheme === "dark" ? activeTheme : "light";
 
-  // accessibility: skip animation if user prefers reduced motion
+  // accessibility: disable animation if user prefers reduced motion
   useEffect(() => {
     Globals.assign({
-      skipAnimation: isFirstMount || !hasNoMotionPreference,
+      skipAnimation: !!isFirstMount || !!prefersReducedMotion,
     });
-  }, [isFirstMount, hasNoMotionPreference]);
+  }, [isFirstMount, prefersReducedMotion]);
 
   // modified from https://jfelix.info/blog/using-react-spring-to-animate-svg-icons-dark-mode-toggle
   const springProperties = {

components/VNC/VNC.tsx

@@ -4,6 +4,9 @@ import RFB from "@novnc/novnc/core/rfb.js";
 import Terminal from "../Terminal";
 import { styled } from "../../lib/styles/stitches.config";
 
+// types for @novnc/novnc are defined manually in ../../types/rfb.d.ts:
+import type NoVncClient from "@novnc/novnc/core/rfb.js";
+
 const Display = styled(
   "div",
   {
@@ -54,7 +57,7 @@ const VNC = ({ server }: VNCProps) => {
   const [message, setMessage] = useState({ message: "", anyKey: false });
 
   // the actual connection and virtual screen (injected by noVNC when it's ready)
-  const rfbRef = useRef<RFB>();
+  const rfbRef = useRef<NoVncClient>();
   const screenRef = useRef<HTMLDivElement>(null);
 
   // ends the session forcefully