From 6e5827e47263c14809772d6cff264166b69ca4c5 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 1 Oct 2021 09:42:21 +0000
Subject: [PATCH] [FIX] web_editor: prevent glitches on field html iframe
 loading

When loading a field html iframe, there are sometimes display glitches
due to the iframe's contents and assets loading lazily. This prevents
those glitches by hiding the iframe until it is fully loaded, creating
a better user experience.

Part-of: odoo/odoo#77724
---
 addons/web_editor/static/src/js/backend/field_html.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/backend/field_html.js b/addons/web_editor/static/src/js/backend/field_html.js
index 65d4b6899ee..8a337926b9b 100644
--- a/addons/web_editor/static/src/js/backend/field_html.js
+++ b/addons/web_editor/static/src/js/backend/field_html.js
@@ -309,7 +309,7 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
             resolver = resolve;
         });
         if (this.nodeOptions.cssReadonly) {
-            this.$iframe = $('<iframe class="o_readonly"/>');
+            this.$iframe = $('<iframe class="o_readonly d-none"/>');
             this.$iframe.appendTo(this.$el);
 
             var avoidDoubleLoad = 0; // this bug only appears on some computers with some chrome version.
@@ -378,6 +378,10 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
 
         def.then(function () {
             self.$content.on('click', 'ul.o_checklist > li', self._onReadonlyClickChecklist.bind(self));
+            if (self.$iframe) {
+                // Iframe is hidden until fully loaded to avoid glitches.
+                self.$iframe.removeClass('d-none');
+            }
         });
     },
     /**