From 4e91e59ccd17d49324bac1d840099c87612e6022 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Thu, 1 Jun 2023 17:23:01 -0300
Subject: [PATCH] regression: Update `LoadingIndicator` colors (#29424)
---
.../client/imports/components/loading.css | 61 +++++++++++++++++++
.../app/theme/client/imports/general/base.css | 2 -
.../theme/client/imports/general/base_old.css | 20 +++++-
.../client/imports/general/variables.css | 8 +++
apps/meteor/app/theme/client/main.css | 1 +
apps/meteor/app/ui-master/server/index.js | 10 +--
.../client/components/LoadingIndicator.tsx | 11 ++--
7 files changed, 99 insertions(+), 14 deletions(-)
create mode 100644 apps/meteor/app/theme/client/imports/components/loading.css
diff --git a/apps/meteor/app/theme/client/imports/components/loading.css b/apps/meteor/app/theme/client/imports/components/loading.css
new file mode 100644
index 00000000000..a6ff93cc4fb
--- /dev/null
+++ b/apps/meteor/app/theme/client/imports/components/loading.css
@@ -0,0 +1,61 @@
+.loading__animation {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loading__animation__bounce {
+ display: inline-block;
+
+ width: 1rem;
+ height: 1rem;
+ margin: 2px;
+
+ animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+
+ border-radius: 100%;
+ background-color: var(--loading-bounce-color-light);
+
+ @media (prefers-color-scheme: dark) {
+ background: var(--loading-bounce-color-dark);
+ }
+}
+
+.loading__animation__bounce--medium {
+ display: inline-block;
+
+ width: 1.25rem;
+ height: 1.25rem;
+}
+
+.loading__animation__bounce--large {
+ display: inline-block;
+
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.loading__animation__bounce + .loading__animation__bounce {
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+}
+
+.loading__animation__bounce + .loading__animation__bounce + .loading__animation__bounce {
+ -webkit-animation-delay: 0s;
+ animation-delay: 0s;
+}
+
+@keyframes loading-bouncedelay {
+ 0%,
+ 80%,
+ 100% {
+ transform: scale(0);
+ }
+
+ 40% {
+ transform: scale(1);
+ }
+}
diff --git a/apps/meteor/app/theme/client/imports/general/base.css b/apps/meteor/app/theme/client/imports/general/base.css
index d8fa13c650d..311327fb6f7 100644
--- a/apps/meteor/app/theme/client/imports/general/base.css
+++ b/apps/meteor/app/theme/client/imports/general/base.css
@@ -27,8 +27,6 @@ body {
height: 100%;
padding: 0;
- background-color: var(--rc-color-primary);
-
font-family: var(--body-font-family);
font-size: var(--text-small-size);
-webkit-font-smoothing: antialiased;
diff --git a/apps/meteor/app/theme/client/imports/general/base_old.css b/apps/meteor/app/theme/client/imports/general/base_old.css
index 7f924a8e1b4..d5e0372fb62 100644
--- a/apps/meteor/app/theme/client/imports/general/base_old.css
+++ b/apps/meteor/app/theme/client/imports/general/base_old.css
@@ -824,9 +824,25 @@
flex-grow: 1;
}
-.full-page,
.page-loading {
- background-color: var(--rc-color-primary);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ display: flex;
+
+ text-align: center;
+
+ background-color: var(--page-loading-background-light);
+
+ align-items: center;
+ justify-content: center;
+
+ @media (prefers-color-scheme: dark) {
+ background: var(--page-loading-background-dark);
+ }
}
.rc-old.full-page {
diff --git a/apps/meteor/app/theme/client/imports/general/variables.css b/apps/meteor/app/theme/client/imports/general/variables.css
index 1e9ad6f4cc7..f50fc614c4b 100644
--- a/apps/meteor/app/theme/client/imports/general/variables.css
+++ b/apps/meteor/app/theme/client/imports/general/variables.css
@@ -352,6 +352,14 @@
--tooltip-text-color: var(--color-white);
--tooltip-text-size: 0.75rem;
--tooltip-radius: var(--border-radius);
+
+ /*
+ * Loading
+ */
+ --page-loading-background-light: var(--rcx-color-surface-tint, #f7f8fa);
+ --page-loading-background-dark: var(--rcx-color-surface-tint, #1f2329);
+ --loading-bounce-color-light: var(--rcx-color-font-default, #2f343d);
+ --loading-bounce-color-dark: var(--rcx-color-font-default, #e4e7ea);
}
.rcx-sidebar--main {
diff --git a/apps/meteor/app/theme/client/main.css b/apps/meteor/app/theme/client/main.css
index 39235c4c4b0..ce5b0cc7830 100644
--- a/apps/meteor/app/theme/client/main.css
+++ b/apps/meteor/app/theme/client/main.css
@@ -17,6 +17,7 @@
@import 'imports/components/modal.css';
@import 'imports/components/messages.css';
@import 'imports/components/emoji.css';
+@import 'imports/components/loading.css';
/* Legacy theming */
@import 'imports/general/theme_old.css';
diff --git a/apps/meteor/app/ui-master/server/index.js b/apps/meteor/app/ui-master/server/index.js
index aba90644c61..753a4e32396 100644
--- a/apps/meteor/app/ui-master/server/index.js
+++ b/apps/meteor/app/ui-master/server/index.js
@@ -150,11 +150,11 @@ injectIntoBody(
You need to enable JavaScript to run this app.
</noscript>
<div id="react-root">
- <div class="page-loading">
- <div class="loading-animation">
- <div class="bounce bounce1"></div>
- <div class="bounce bounce2"></div>
- <div class="bounce bounce3"></div>
+ <div class="page-loading" role="alert" aria-busy="true" aria-live="polite" aria-label="loading">
+ <div class="loading__animation">
+ <div class="loading__animation__bounce"></div>
+ <div class="loading__animation__bounce"></div>
+ <div class="loading__animation__bounce"></div>
</div>
</div>
</div>
diff --git a/apps/meteor/client/components/LoadingIndicator.tsx b/apps/meteor/client/components/LoadingIndicator.tsx
index 26127b122d4..c36fe4fcd56 100644
--- a/apps/meteor/client/components/LoadingIndicator.tsx
+++ b/apps/meteor/client/components/LoadingIndicator.tsx
@@ -1,11 +1,12 @@
-import { Box, Throbber } from '@rocket.chat/fuselage';
import React from 'react';
-const LoadingIndicator = () => {
+const LoadingIndicator = ({ variation }: { variation?: 'medium' | 'large' }) => {
return (
- <Box display='flex' height='100%' width='100%' alignItems='center' justifyContent='center' position='absolute'>
- <Throbber />
- </Box>
+ <div className='loading__animation'>
+ <div className={['loading__animation__bounce', variation && `loading__animation__bounce--${variation}`].filter(Boolean).join(' ')} />
+ <div className={['loading__animation__bounce', variation && `loading__animation__bounce--${variation}`].filter(Boolean).join(' ')} />
+ <div className={['loading__animation__bounce', variation && `loading__animation__bounce--${variation}`].filter(Boolean).join(' ')} />
+ </div>
);
};
--
GitLab