From 852e977b31be9e59f68fa10fab692808263b60f6 Mon Sep 17 00:00:00 2001
From: Aaron Delasy <aaron@thelang.io>
Date: Sat, 26 Oct 2024 02:02:15 +0300
Subject: [PATCH] Fix data-state errors

---
 app/footer.tsx          | 9 ++++++++-
 components/UserMenu.tsx | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/footer.tsx b/app/footer.tsx
index ec2f520..c9db012 100644
--- a/app/footer.tsx
+++ b/app/footer.tsx
@@ -1,5 +1,12 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import { ThemeToggle } from "@/components/ThemeToggle";
+
+const ThemeToggle = dynamic(
+  async () => (await import("@/components/ThemeToggle")).ThemeToggle,
+  {
+    ssr: false,
+  },
+);
 
 export default function Footer() {
   return (
diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
index 8bdc518..cb95dbe 100644
--- a/components/UserMenu.tsx
+++ b/components/UserMenu.tsx
@@ -3,7 +3,7 @@
 import { ReactNode } from "react";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { PersonIcon } from "@radix-ui/react-icons";
-import { ThemeToggle } from "@/components/ThemeToggle";
+import dynamic from "next/dynamic";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -14,6 +14,13 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
+const ThemeToggle = dynamic(
+  async () => (await import("@/components/ThemeToggle")).ThemeToggle,
+  {
+    ssr: false,
+  },
+);
+
 export function UserMenu({ children }: { children: ReactNode }) {
   return (
     <div className="flex items-center gap-2 text-sm font-medium">