Merge pull request #3232 from AlchemyCMS/backport/7.4-stable/pr-3226

tvdeyen · web-flow · commit 39190fd36233 · 2025-04-02T12:38:46.000+02:00
[7.4-stable] Hide body while custom elements load
diff --git a/app/assets/builds/alchemy/admin.css b/app/assets/builds/alchemy/admin.css
diff --git a/app/assets/builds/alchemy/admin.css.map b/app/assets/builds/alchemy/admin.css.map
diff --git a/app/assets/stylesheets/alchemy/admin/base.scss b/app/assets/stylesheets/alchemy/admin/base.scss
@@ -8,6 +8,10 @@ html {
     background-color: var(--color-blue_medium) !important;
     z-index: 400001;
   }
+
+  &.loading-custom-elements body {
+    opacity: 0;
+  }
 }
 
 *,
@@ -42,6 +46,8 @@ body {
   background-color: $body-background-color;
   height: 100%;
   cursor: default;
+  opacity: 1;
+  transition: opacity $transition-duration;
 
   // Fix for strange element window offset
   &.pages.edit {
diff --git a/app/assets/stylesheets/alchemy/admin/navigation.scss b/app/assets/stylesheets/alchemy/admin/navigation.scss
@@ -131,7 +131,7 @@
 
   img,
   svg,
-  .icon {
+  alchemy-icon {
     display: inline-flex;
     width: var(--icon-size-xxl);
     height: var(--icon-size-xxl);
diff --git a/app/javascript/alchemy_admin/components/index.js b/app/javascript/alchemy_admin/components/index.js
@@ -24,3 +24,19 @@ import "alchemy_admin/components/select"
 import "alchemy_admin/components/spinner"
 import "alchemy_admin/components/tags_autocomplete"
 import "alchemy_admin/components/tinymce"
+
+await Promise.race([
+  // Load all global custom elements
+  Promise.allSettled([
+    customElements.whenDefined("alchemy-button"),
+    customElements.whenDefined("alchemy-icon"),
+    customElements.whenDefined("alchemy-growl"),
+    customElements.whenDefined("alchemy-message"),
+    customElements.whenDefined("alchemy-spinner")
+  ]),
+  // Resolve after two seconds
+  new Promise((resolve) => setTimeout(resolve, 1250))
+])
+
+// Remove the class, showing the page content
+document.documentElement.classList.remove("loading-custom-elements")
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%= ::I18n.locale %>" class="no-js">
+<html lang="<%= ::I18n.locale %>" class="no-js loading-custom-elements">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
