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:
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: