Theme Switching Performance/UX

[andyols]

Hello epic-stack enjoyers. 👋

I have been experimenting with this stack a lot recently and am loving it. However, I have come across an issue regarding the theme switching functionality.

If the user has a slow connection, the theme switch takes quite some time to happen. Here is an example of a theme switch action in my network tab using Fast 3G throttling.

With the current theme switch implementation, the theme will not change until both of those network requests are finished.

I initially discovered this while trying to make a serverless version of this stack using Planetscale as a database. Even with the ~100 ms server responses in that environment, the theme toggling felt clunky. This is obviously less than ideal from a UX perspective, so I was wondering if there is any way around this?

[andrecasal]

We could let the theme switch immediately and let the requests happen in the background.

[andrecasal]

Also, good catch!

[kentcdodds]

We could definitely implement optimistic UI right here:

epic-stack/app/routes/resources+/theme/index.tsx

Line 131 in 17b3023

return requestInfo.session.theme ?? hints.theme

Using useFetchers we could find the fetcher responsible for switching the theme. Shouldn't be too challenging.

[andyols]

Been experimenting with the useFetchers idea. This is what I have so far and it seems to work pretty well.

export function useTheme() {
	const requestInfo = useRequestInfo()
	const { optimisticTheme, hints } = useOptimisticTheme()
	return optimisticTheme ?? requestInfo.session.theme ?? hints.theme
}

function useOptimisticTheme() {
	const hints = useHints()
	const fetchers = useFetchers()

	const themeFetcher = fetchers.find(f => f.formAction?.startsWith(ROUTE_PATH))

	let themeSubmitted
	let optimisticTheme

	if (themeFetcher && themeFetcher.formData) {
		const submission = parse(themeFetcher.formData, {
			schema: ThemeFormSchema,
		})
		themeSubmitted = submission.value?.theme
		optimisticTheme = themeSubmitted === 'system' ? hints.theme : themeSubmitted
	}

	return { optimisticTheme, themeSubmitted, hints }
}

It may be a little over-engineered, not sure. Dealing with the "system" option complicates things as that needs something to fall back on. Not sure if using the hints for that is the best option but it seems to work.

Also, the reason I used a seperate function was to be able to reuse it up in the ThemeSwitch component. Otherwise, the icon "mode" would still be relying on data from the request.

const { themeSubmitted } = useOptimisticTheme()
const mode = themeSubmitted ?? userPreference ?? 'system'

And I suppose this would theoretically allow it to be used anywhere you need optimistic UI related to the theme.

[kentcdodds]

Yes, that looks good to me. A bit more work than I expected, but I appreciate the desire to parse the submission properly 👍 Thanks for working on this. Would you be willing to add a PR for this?

[andyols]

Sure thing! Just made it.
implement optimistic theme updates #273