1 files changed, 11 insertions, 0 deletions
diff --git a/apps/web/lib/get-theme-button.tsx b/apps/web/lib/get-theme-button.tsx
new file mode 100644
index 00000000..020cc976
--- /dev/null
+++ b/apps/web/lib/get-theme-button.tsx
@@ -0,0 +1,11 @@
+// Theming that works perfectly with app router (no flicker, jumps etc!)
+
+import dynamic from "next/dynamic";
+
+// Don't SSR the toggle since the value on the server will be different than the client
+export const getThemeToggler = () =>
+  dynamic(() => import("@repo/ui/shadcn/theme-toggle"), {
+    ssr: false,
+    // Make sure to code a placeholder so the UI doesn't jump when the component loads
+    loading: () => <div className="w-6 h-6" />,
+  });