Embed form flickering bug (#658)

* Embed form flickering bug

* fix issue when remove hidden class

client/lib/forms/public-page.js

@@ -1,4 +1,4 @@
-let darkModeNodeParent = import.meta.client ? document.body : null
+let darkModeNodeParent = import.meta.client ? document.documentElement : null
 
 /**
  * Handle form public pages dark mode and transparent mode
@@ -7,7 +7,7 @@ export function handleDarkMode (darkMode, elem = null) {
   if (import.meta.server)
     return
 
-  darkModeNodeParent = elem ?? document.body
+  darkModeNodeParent = elem ?? document.documentElement
 
   // Dark mode
   if (['dark', 'light'].includes(darkMode))
@@ -66,7 +66,7 @@ export function useClassWatcher (elem, className) {
 export function useDarkMode (elem = ref(null)) {
   // Define a computed property to handle the element reference reactively
   const effectiveElem = computed(() => {
-    return elem.value || (process.client ? document.body : null)
+    return elem.value || (process.client ? document.documentElement : null)
   })
 
   // Pass the computed property to useClassWatcher
@@ -83,7 +83,7 @@ export function darkModeEnabled (elem = ref(null)) {
 
   // Update isDark based on the current class
   const updateIsDark = () => {
-    const finalElement = elem.value ?? document.body
+    const finalElement = elem.value ?? document.documentElement
     isDark.value = finalElement.classList.contains('dark')
   }
 
@@ -130,8 +130,8 @@ function handleDarkModeToggle (enabled) {
 export function disableDarkMode () {
   if (import.meta.server)
     return
-  const body = document.body
+  const html = document.documentElement
-  body.classList.remove('dark')
+  html.classList.remove('dark')
   // Remove event listener
   window
     .matchMedia('(prefers-color-scheme: dark)')

client/pages/forms/[slug]/index.vue

@@ -136,8 +136,15 @@ const loadForm = async (setup=false) => {
   formsStore.stopLoading()
 
   // Adapt page to form: colors, custom code etc
-  handleDarkMode(form.value.dark_mode)
+  handleDarkMode(form.value?.dark_mode)
-  handleTransparentMode(form.value.transparent_background)
+  handleTransparentMode(form.value?.transparent_background)
+
+  // Remove 'hidden' class from html tag if present
+  nextTick(() => {
+    if (import.meta.client) {
+      window.document.documentElement.classList.remove('hidden')
+    }
+  })
 }
 
 await loadForm(true)
@@ -154,6 +161,13 @@ onMounted(() => {
     handleDarkMode(form.value?.dark_mode)
     handleTransparentMode(form.value?.transparent_background)
 
+    // Remove 'hidden' class from html tag if present
+    nextTick(() => {
+      if (import.meta.client) {
+        window.document.documentElement.classList.remove('hidden')
+      }
+    })
+
     if (import.meta.client) {
       if (form.value.custom_code) {
         const scriptEl = document.createRange().createContextualFragment(form.value.custom_code)
@@ -237,9 +251,18 @@ useOpnSeoMeta({
   }
 })
 
+const getHtmlClass = computed(() => {
+  return {
+    dark: form.value?.dark_mode === 'dark',
+    hidden: form.value?.dark_mode === 'auto' && import.meta.server,
+  }
+})
+
 useHead({
   htmlAttrs: {
-    lang: (form.value?.language) ? form.value.language : 'en'
+    dir: () => form.value?.layout_rtl ? 'rtl' : 'ltr',
+    class: getHtmlClass.value,
+    lang: () => form.value?.language || 'en'
   },
   titleTemplate: (titleChunk) => {
     if (pageMeta.value.page_title) {
@@ -259,9 +282,6 @@ useHead({
       content: 'black-translucent'
     },
   ] : {},
-  script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' }],
+  script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' }]
-  htmlAttrs: () => ({
-    dir: form.value?.layout_rtl ? 'rtl' : 'ltr'
-  })
 })
 </script>