faster theme swap

Author: stipsan

next-enterprise/src/app/ThemeButton.tsx

@@ -1,18 +1,22 @@
 'use client'
 
 import {useTransition} from 'react'
+import {randomColorTheme} from './actions'
 
 export function ThemeButton() {
   const [pending, startTransition] = useTransition()
   return (
     <button
       disabled={pending}
       onClick={() =>
-        startTransition(async () => {
-          await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
-            method: 'PUT',
-          })
-        })
+        startTransition(() =>
+          randomColorTheme().then((data) => {
+            if (data?.background && data?.text) {
+              document.documentElement.style.setProperty('--theme-background', data.background)
+              document.documentElement.style.setProperty('--theme-text', data.text)
+            }
+          }),
+        )
       }
       className={`bg-theme-button text-theme-button focus:ring-theme focus:ring-offset-theme focus:outline-hidden cursor-pointer rounded-md px-4 py-2 text-sm font-semibold transition ease-in-out focus:ring-2 focus:ring-opacity-50 focus:ring-offset-2 focus:duration-0 disabled:cursor-not-allowed disabled:opacity-50 ${pending ? 'animate-pulse cursor-wait duration-150' : 'duration-1000'} `}
     >

next-enterprise/src/app/actions.ts

@@ -0,0 +1,18 @@
+'use server'
+
+import {revalidateTag} from 'next/cache'
+
+export async function randomColorTheme() {
+  const response = await fetch('https://lcapi-examples-api.sanity.dev/api/random-color-theme', {
+    method: 'PUT',
+  })
+  revalidateTag('theme')
+  if (!response.ok) {
+    return null
+  }
+  const data = await response.json()
+  if (typeof data === 'object' && 'background' in data && 'text' in data) {
+    return data as {background: string; text: string}
+  }
+  return null
+}

next-enterprise/src/app/layout.tsx

@@ -15,7 +15,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const {data} = await sanityFetch({query: THEME_QUERY})
+  const {data} = await sanityFetch({query: THEME_QUERY, tags: ['theme']})
 
   return (
     <html