search

codemonument / deno_audio_logbook

A deno fresh server, with a telegram bot to receive audio messages and a website to show all messages of a user in a calendar
2 stars 0 forks source link

Black Flashes on Page Reloads #15

Closed bjesuiter closed 1 year ago

bjesuiter commented 1 year ago

Problem probably: Preact theme Switcher JS must be hydrated before theme is finally set, bc. current user theme comes from localstorage.

=> Idea: Store current user theme in userSession and pass it down on server render. => Idea 2: Add a new Wrapper in Layout component around header, main and footer components to attach the theme attribute to.

bjesuiter commented 1 year ago

Idea 3: Use _App.tsx to control the whole document: https://fresh.deno.dev/docs/concepts/app-wrapper

Bloodiko commented 1 year ago

_app.tsx also requires info being available on server render (i guess?, since its a route and not an island)

i think this will not be fixable unless we save it serverside, or find a way to run an island before rendering html.

bjesuiter commented 1 year ago

Yes, we need to store the users design preference on server side for this.

Maybe we need to add a UserPreferences Table to the UserSession one to have a place for these settings.

=> ofc toghether with your cache :)

bjesuiter commented 1 year ago

Better Idea: Let the ThemeSwitcher write a non-secure cookie on client side and evaluate it in server render! If not available, set default.

Detect the default via client hint headers: https://dev.to/bryce/detecting-dark-mode-on-every-request-21b2

More info on web.dev: https://web.dev/user-preference-media-features-headers/

bjesuiter commented 1 year ago

Implemented Cookie based theming:

Untitled