Stop flash of unstyled content (#1932)

Energinet-DataHub · Aug 8, 2023 · 5eb227b · 5eb227b
1 parent 9e67b08
commit 5eb227b
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 0 deletions.
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
@@ -64,13 +64,21 @@
       .error.itemLevel.show {
         font-size: 14px;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {
         Utils.waitFor("button#next", function (element) {
           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
@@ -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
@@ -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
@@ -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
@@ -81,13 +81,21 @@
         text-align: center;
         padding-bottom: 24px;
       }
+
+      main {
+        display: none;
+      }
     </style>
     <script>
       function init() {
         Utils.waitFor("button#next", function (element) {
           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
@@ -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
@@ -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
@@ -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
@@ -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");