Optimistic Theme
π¨βπΌ Wow! That's a huge improvement for users with a slow network. And we didn't
have to compromise on the capabilities of our theme solution.
Cookies sure are neat!
π¦ Remix version 2.2.0
added a new feature which makes implementing this even easier. You can now
provide a
key to the
useFetcher hook and then use that same key to find the fetcher. So you could
do something like this:Run locally for transcripts
Here's some updated code:
const themeFetcherKey = 'theme-fetcher'
function useTheme() {
const data = useLoaderData<typeof loader>()
const themeFetcher = useFetcher<typeof action>({ key: themeFetcherKey })
const optimisticTheme = themeFetcher.formData?.get('theme')
if (optimisticTheme === 'light' || optimisticTheme === 'dark') {
return optimisticTheme
}
return data.theme
}
function ThemeSwitch({ userPreference }: { userPreference?: Theme }) {
const fetcher = useFetcher<typeof action>({ key: themeFetcherKey })
// ...
}
π¦ If you want to take this further and implement the user's preference as a
default theme, you can try that! It's just a little outside the scope of this
auth workshop, so we'll leave that to you as a side-quest. You'll face an issue
where the user's preference can't be known server-side. However, if you
implement Client Hints, you can overcome that issue. Watch this tip from Kent to
learn about Client hints: