regression: Update LoadingIndicator colors (#29424)

RocketChat · Jun 1, 2023 · 4e91e59 · 4e91e59
1 parent cde2539
commit 4e91e59
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 14 deletions.
diff --git a/apps/meteor/app/theme/client/imports/components/loading.css 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
 	);
 };