From 501497b36f4d2e4ea1354682679fc5f5585df1ad Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 16 Sep 2021 17:09:43 -0500 Subject: [PATCH] Display loading indicator while JS is loading --- app/index.ejs | 8 ++++++-- app/styles/basics.scss | 1 + app/styles/loading.scss | 7 ++++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/app/index.ejs b/app/index.ejs index 87c60d6c8..3341b57bc 100644 --- a/app/index.ejs +++ b/app/index.ejs @@ -8,8 +8,12 @@ - + +
+
+
+
+
-
diff --git a/app/styles/basics.scss b/app/styles/basics.scss index 0406524c4..4694adbfd 100644 --- a/app/styles/basics.scss +++ b/app/styles/basics.scss @@ -43,6 +43,7 @@ body { &.app-body { position: absolute; width: 100%; + min-height: 100%; padding: 0; overflow: hidden; overflow-y: scroll; diff --git a/app/styles/loading.scss b/app/styles/loading.scss index f45769ecf..6f5f1736f 100644 --- a/app/styles/loading.scss +++ b/app/styles/loading.scss @@ -27,7 +27,8 @@ height: 42px; box-sizing: border-box; background-color: transparent; - border: 0 solid hsla(var(--brand-color_hsl), 0.5); + border: 0 solid; + border-color: hsla(var(--brand-color_hsl), 0.5); border-width: 6px; border-radius: 50%; } @@ -40,6 +41,10 @@ animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } +.app-body--loading .loading-indicator__figure { + border-color: #ddd; +} + @keyframes loader-figure { 0% { width: 0;