From fde22157818bcea6c475a4cfbc66d46bcd8ae78c Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Thu, 2 Jan 2025 19:57:25 +0530
Subject: [PATCH 1/2] Embed form flickering bug

---
 client/lib/forms/public-page.js     | 12 ++++++------
 client/pages/forms/[slug]/index.vue | 30 ++++++++++++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/lib/forms/public-page.js b/client/lib/forms/public-page.js
index cded2a3d9..2b40c0f98 100644
--- a/client/lib/forms/public-page.js
+++ b/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
-  body.classList.remove('dark')
+  const html = document.documentElement
+  html.classList.remove('dark')
   // Remove event listener
   window
     .matchMedia('(prefers-color-scheme: dark)')
diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index 969dfbb66..c67fa3b91 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -136,8 +136,13 @@ 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(() => {
+    document.documentElement.classList.remove('hidden')
+  })
 }
 
 await loadForm(true)
@@ -154,6 +159,11 @@ onMounted(() => {
     handleDarkMode(form.value?.dark_mode)
     handleTransparentMode(form.value?.transparent_background)
 
+    // Remove 'hidden' class from html tag if present
+    nextTick(() => {
+      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 +247,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 +278,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>

From 286de7ab07bf1d7293f67a2e3f511b66c6f9d172 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Fri, 3 Jan 2025 16:06:25 +0530
Subject: [PATCH 2/2] fix issue when remove hidden class

---
 client/pages/forms/[slug]/index.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index c67fa3b91..4fd722279 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -141,7 +141,9 @@ const loadForm = async (setup=false) => {
 
   // Remove 'hidden' class from html tag if present
   nextTick(() => {
-    document.documentElement.classList.remove('hidden')
+    if (import.meta.client) {
+      window.document.documentElement.classList.remove('hidden')
+    }
   })
 }
 
@@ -161,7 +163,9 @@ onMounted(() => {
 
     // Remove 'hidden' class from html tag if present
     nextTick(() => {
-      document.documentElement.classList.remove('hidden')
+      if (import.meta.client) {
+        window.document.documentElement.classList.remove('hidden')
+      }
     })
 
     if (import.meta.client) {