jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 14:21:16 -04:00
Code Issues Activity

fix unnecessary re-rendering of ThemeToggle

Browse Source
This commit is contained in:
Jake Jarvis
2022-06-14 13:00:11 -04:00
parent 2700f32054
commit 091ff73ab6
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/ThemeToggle/ThemeToggle.tsx
View File

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

5
components/VNC/VNC.tsx
View File

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