jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-11 02:22:55 -05: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 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 = {