From 3528707e52c58d3306a5dcbd5680280a0ee8c564 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Thu, 6 Jan 2022 20:11:15 -0500
Subject: [PATCH] toggle is still flashing, try reverting to importing
 dynamically...?

---
 components/page-header/Menu.tsx        |  5 ++++-
 components/page-header/ThemeToggle.tsx | 10 ----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/components/page-header/Menu.tsx b/components/page-header/Menu.tsx
index 31effc2d..ffc80162 100644
--- a/components/page-header/Menu.tsx
+++ b/components/page-header/Menu.tsx
@@ -1,9 +1,12 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import ThemeToggle from "./ThemeToggle";
 import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
 
 import styles from "./Menu.module.scss";
 
+// ensure the theme toggle isn't evaluated server-side
+const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
+
 const links = [
   {
     icon: <HomeIcon className={`icon ${styles.icon}`} />,
diff --git a/components/page-header/ThemeToggle.tsx b/components/page-header/ThemeToggle.tsx
index 3d30b186..479489da 100644
--- a/components/page-header/ThemeToggle.tsx
+++ b/components/page-header/ThemeToggle.tsx
@@ -1,19 +1,9 @@
-import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import { BulbOffIcon, BulbOnIcon } from "../icons";
 
 const ThemeToggle = ({ className = "" }) => {
-  const [mounted, setMounted] = useState(false);
   const { resolvedTheme, setTheme } = useTheme();
 
-  // avoid hydration mismatch:
-  // https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
-  useEffect(() => setMounted(true), []);
-  if (!mounted) {
-    // always return one of the bulbs just so there are never flashing layout shifts
-    return <BulbOffIcon className={`icon ${className}`} />;
-  }
-
   return (
     <button
       onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}