Skip to content

Commit e84f59d

Browse files
tvdeyentvdeyen
committed
Hide body while custom elements load
Reduce FOUCE (Flash Of Undefined Custom Elements)[^1]. Waits until all global custom elements (icon, flash, button, message and spinner) are defined and fades in the body. If the custom elements are not defined after 1.25s fade in body anyway. [^1]: https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements (cherry picked from commit 83830ba) # Conflicts: # app/assets/builds/alchemy/admin.css # app/assets/builds/alchemy/admin.css.map
1 parent 2f15329 commit e84f59d

File tree

5 files changed

+25
-3
lines changed

5 files changed

+25
-3
lines changed

‎app/assets/builds/alchemy/admin.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/builds/alchemy/admin.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/stylesheets/alchemy/admin/base.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ html {
88
background-color: var(--color-blue_medium) !important;
99
z-index: 400001;
1010
}
11+
12+
&.loading-custom-elements body {
13+
opacity: 0;
14+
}
1115
}
1216

1317
*,
@@ -42,6 +46,8 @@ body {
4246
background-color: $body-background-color;
4347
height: 100%;
4448
cursor: default;
49+
opacity: 1;
50+
transition: opacity $transition-duration;
4551

4652
// Fix for strange element window offset
4753
&.pages.edit {

‎app/javascript/alchemy_admin/components/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,19 @@ import "alchemy_admin/components/select"
2424
import "alchemy_admin/components/spinner"
2525
import "alchemy_admin/components/tags_autocomplete"
2626
import "alchemy_admin/components/tinymce"
27+
28+
await Promise.race([
29+
// Load all global custom elements
30+
Promise.allSettled([
31+
customElements.whenDefined("alchemy-button"),
32+
customElements.whenDefined("alchemy-icon"),
33+
customElements.whenDefined("alchemy-growl"),
34+
customElements.whenDefined("alchemy-message"),
35+
customElements.whenDefined("alchemy-spinner")
36+
]),
37+
// Resolve after two seconds
38+
new Promise((resolve) => setTimeout(resolve, 1250))
39+
])
40+
41+
// Remove the class, showing the page content
42+
document.documentElement.classList.remove("loading-custom-elements")

‎app/views/layouts/alchemy/admin.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="<%= ::I18n.locale %>" class="no-js">
2+
<html lang="<%= ::I18n.locale %>" class="no-js loading-custom-elements">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">

0 commit comments

Comments
 (0)