Embed form flickering bug (#658)

* Embed form flickering bug

* fix issue when remove hidden class

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)
-  handleTransparentMode(form.value.transparent_background)
+  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')
+    }
+  })
 }
 
 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' }],
-  htmlAttrs: () => ({
-    dir: form.value?.layout_rtl ? 'rtl' : 'ltr'
-  })
+  script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' }]
 })
 </script>