From 5eb227b4b72d9aec158c19afa84a218269819aac Mon Sep 17 00:00:00 2001
From: Morten Vestergaard Hansen <mimo@mimo-design.com>
Date: Thu, 3 Aug 2023 10:41:40 +0200
Subject: [PATCH] Stop flash of unstyled content (#1932)

---
 .../b2c-custom-layouts/changepassword-unified.html       | 9 +++++++++
 .../b2c-custom-layouts/forgotpassword-unified.html       | 9 +++++++++
 .../src/assets/b2c-custom-layouts/login-unified.html     | 9 +++++++++
 .../b2c-custom-layouts/login-with-mitid-unified.html     | 9 +++++++++
 .../b2c-custom-layouts/multifactorauth-unified.html      | 9 +++++++++
 .../src/assets/b2c-custom-layouts/reset-password.html    | 9 +++++++++
 .../src/assets/b2c-custom-layouts/self-asserted.html     | 9 +++++++++
 .../src/assets/b2c-custom-layouts/signup-unified.html    | 9 +++++++++
 .../src/assets/b2c-custom-layouts/totp-unified.html      | 8 ++++++++
 9 files changed, 80 insertions(+)

diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/changepassword-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/changepassword-unified.html
index c93a69cce0..a8fcddd198 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/changepassword-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/changepassword-unified.html
@@ -64,6 +64,10 @@
       .error.itemLevel.show {
         font-size: 14px;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {
@@ -71,6 +75,10 @@
           element.addEventListener("click", Utils.toggleErrorClasses);
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
 
     <script>
@@ -83,6 +91,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/forgotpassword-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/forgotpassword-unified.html
index 94a7be6fd8..10cc98d11d 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/forgotpassword-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/forgotpassword-unified.html
@@ -96,6 +96,10 @@
         background: transparent;
       }
 
+      main {
+        display: none;
+      }
+
       /* Remove and change azure elements */
     </style>
     <script>
@@ -196,6 +200,10 @@
           });
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
     <script>
       const path = window.SETTINGS
@@ -207,6 +215,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-unified.html
index 97cb4fb0df..3eab5dc94b 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-unified.html
@@ -131,6 +131,10 @@
         top: 50%;
         right: 0;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function appendForgotPasswordTemplate() {
@@ -155,6 +159,10 @@
           appendForgotPasswordTemplate();
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
 
     <script>
@@ -166,6 +174,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-with-mitid-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-with-mitid-unified.html
index 8bbb7210cb..01359d4c39 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-with-mitid-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/login-with-mitid-unified.html
@@ -146,6 +146,10 @@
         top: 50%;
         right: 0;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function getB2CFlowLink(flowname) {
@@ -189,6 +193,10 @@
           setMitIdFlowSignInFlow();
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
 
     <script>
@@ -200,6 +208,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/multifactorauth-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/multifactorauth-unified.html
index 71a26cadfa..a509023618 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/multifactorauth-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/multifactorauth-unified.html
@@ -81,6 +81,10 @@
         text-align: center;
         padding-bottom: 24px;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {
@@ -88,6 +92,10 @@
           element.addEventListener("click", toggleErrorClasses);
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
     <script>
       const path = window.SETTINGS
@@ -99,6 +107,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/reset-password.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/reset-password.html
index 5456a2e3fc..4c7810e5f6 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/reset-password.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/reset-password.html
@@ -94,7 +94,15 @@
         display: none !important;
       }
       /* Remove and change azure elements */
+      main {
+        display: none;
+      }
     </style>
+    <script>
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
+    </script>
     <script>
       const path = window.SETTINGS
         ? SETTINGS.remoteResource.replace(SETTINGS.remoteResource.split("/").pop(), "")
@@ -105,6 +113,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
     </script>
   </head>
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/self-asserted.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/self-asserted.html
index 6f2a2efd6b..79a2428aad 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/self-asserted.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/self-asserted.html
@@ -107,6 +107,10 @@
         display: block !important;
         margin-top: 1.5rem;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {
@@ -122,6 +126,10 @@
           });
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
     <script>
       const path = window.SETTINGS
@@ -133,6 +141,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/signup-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/signup-unified.html
index 2dbcb62cb5..18696e5902 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/signup-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/signup-unified.html
@@ -90,6 +90,10 @@
         display: block !important;
         margin-top: 1.5rem;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {
@@ -105,6 +109,10 @@
           });
         });
       }
+
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
     <script>
       const path = window.SETTINGS
@@ -116,6 +124,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");
diff --git a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/totp-unified.html b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/totp-unified.html
index d7a4ac1066..5c4d277667 100644
--- a/libs/dh/shared/assets/src/assets/b2c-custom-layouts/totp-unified.html
+++ b/libs/dh/shared/assets/src/assets/b2c-custom-layouts/totp-unified.html
@@ -116,9 +116,16 @@
         margin-bottom: 0;
         display: block;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {}
+      function showContent() {
+        document.querySelector("main").style.display = "block";
+      }
     </script>
 
     <script>
@@ -130,6 +137,7 @@
       link.rel = "stylesheet";
       link.type = "text/css";
       link.href = path + "main.css";
+      link.onload = showContent;
       head.appendChild(link);
 
       var script = document.createElement("script");