[{"slug":"flash-of-unexpected-content-svelte-and-static-site-generation","frontmatter":{"content":"\nI have had support for 2 themes on my website for a long time now. I added the feature using Svelte and saved the user preference in a cookie(`theme`). It was quite straightforward to implement it in Svelte.\n\n```jsx\n**\n\n\n

\n.... All Website Content Here ....\n

\n\n```\n\nIt worked just fine. \n\nThen I noticed a problem with it. If the user has chosen a dark theme and then he refreshes the page, for a brief moment, light theme is visible. This flicker is a really a problem because the user has chosen dark theme and suddenly for a brief moment everything becomes white. It might cause strain in eyes in a dark setting.\n\nThe reason for this is simply because when `onMount` occurs, elements are already rendered and visible on screen(with light theme) and then in `onMount` theme is changed to `dark`\n\nI added the following code in the `app.html` itself outside the SvelteKit framework. The code has performance mark entries to measure the improvement.\n\n```jsx\nperformance.mark('start')\n // Ensure that theme is applied before the body-wrapper is rendered on the page.\n // Allowing the theme to be switched using Svelte adds a delay in theme change because statically generated pages would have light theme hardcoded and theme switches from light to dark(if required) during onMount only.\n requestAnimationFrame(function ensureTheme() {\n if (!document.getElementById('body-wrapper')) {\n requestAnimationFrame(ensureTheme)\n }\n performance.mark('applyTheme');\n performance.measure('themeRestoreTime', 'start');\n themeToEnsure = document.cookie.match(/theme\\s*=([^;]*)/);\n themeToEnsure = themeToEnsure && themeToEnsure[1] || 'light';\n document.getElementById('body-wrapper').classList.add(themeToEnsure);\n })\n```\n\nI instrumented the `onMount` code as well.\n\n```jsx\n**\n\n

\n.... All Website Content Here ....\n

\n```\n\nAt 4x CPU, this is how it performed.\n\n![Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/Screenshot_2021-06-21_at_5.55.20_PM.png](/notion/Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/Screenshot_2021-06-21_at_5.55.20_PM.png)\n\nExperience during a refresh, **Earlier**: Notice white background\n\n![Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/before.gif](/notion/Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/before.gif)\n\nExperience during a refresh, **Now** : Notice there is no white background\n\n![Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/after.gif](/notion/Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/after.gif)","data":{"category":"SSG, SvelteKit, performance","creationTs":1623909240000,"date":"June 17, 2021 7:54 AM","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","title":"Flash of unexpected content - Svelte and Static Site Generation"},"isEmpty":false,"excerpt":"","category":["SSG","SvelteKit","performance"],"creationTs":1623909240000,"date":"June 17, 2021","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","title":"Flash of unexpected content - Svelte and Static Site Generation","updated":"September 9, 2021"},"content":"

I have had support for 2 themes on my website for a long time now. I added the feature using Svelte and saved the user preference in a cookie(theme). It was quite straightforward to implement it in Svelte.

<!-- **__layout.svelte -->**\n\n<script>\n  // Default Theme - Rendered Server Side\n    let theme = 'light';\n    onMount(()=>{\n        const result = document.cookie.match(/theme=(.*?)(;|$)/);\n    // Change theme based on user's preference on the website.\n        theme = result && result[1] || 'theme';\n    });\n</script>\n<div class={theme}>\n.... All Website Content Here ....\n</div>\n

It worked just fine.

Then I noticed a problem with it. If the user has chosen a dark theme and then he refreshes the page, for a brief moment, light theme is visible. This flicker is a really a problem because the user has chosen dark theme and suddenly for a brief moment everything becomes white. It might cause strain in eyes in a dark setting.

The reason for this is simply because when onMount occurs, elements are already rendered and visible on screen(with light theme) and then in onMount theme is changed to dark

I added the following code in the app.html itself outside the SvelteKit framework. The code has performance mark entries to measure the improvement.

performance.mark('start')\n  // Ensure that theme is applied before the body-wrapper is rendered on the page.\n  // Allowing the theme to be switched using Svelte adds a delay in theme change because statically generated pages would have light theme hardcoded and theme switches from light to dark(if required) during onMount only.\n  requestAnimationFrame(function ensureTheme() {\n      if (!document.getElementById('body-wrapper')) {\n          requestAnimationFrame(ensureTheme)\n      }\n      performance.mark('applyTheme');\n      performance.measure('themeRestoreTime', 'start');\n      themeToEnsure = document.cookie.match(/theme\\s*=([^;]*)/);\n      themeToEnsure = themeToEnsure && themeToEnsure[1] || 'light';\n      document.getElementById('body-wrapper').classList.add(themeToEnsure);\n  })\n

I instrumented the onMount code as well.

<!-- **__layout.svelte -->**\n<script>\n  // Default Theme - Rendered Server Side\n    let theme = 'light';\n    onMount(()=>{\n        performance.mark('mountLayout')\n    performance.measure('svelteThemeRestoreTime', 'start', 'mountLayout');\n        const result = document.cookie.match(/theme=(.*?)(;|$)/);\n    // Change theme based on user's preference on the website.\n        theme = result && result[1] || 'theme';\n    });\n</script>\n<div class={theme}>\n.... All Website Content Here ....\n</div>\n

At 4x CPU, this is how it performed.

$\"Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/Screenshot_2021-06-21_at_5.55.20_PM.png\"$

Experience during a refresh, Earlier: Notice white background

$\"Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/before.gif\"$

Experience during a refresh, Now : Notice there is no white background

$\"Flash%20of%20unexpected%20content%20-%20Svelte%20and%20Static%20Si%2023a86925f81f42488e6cac9bb874a24c/after.gif\"$

\n"}]

Category: SvelteKit