From 3ca5752c9f8f4f188e7e3e079ea6fe239de0fb37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Souza?= <contato@ramonsouza.com>
Date: Thu, 28 Oct 2021 17:58:04 +0000
Subject: [PATCH] convert loading-screen component

---
 .../components/loading-screen/component.jsx   | 21 +++---
 .../ui/components/loading-screen/styles.js    | 72 +++++++++++++++++++
 .../stylesheets/styled-components/palette.js  |  4 ++
 3 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 bigbluebutton-html5/imports/ui/components/loading-screen/styles.js

diff --git a/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx b/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx
index c54e954a39..83e827caeb 100644
--- a/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/loading-screen/component.jsx
@@ -1,17 +1,20 @@
 import React from 'react';
-import { styles } from './styles.scss';
+import Styled from './styles';
+import Settings from '/imports/ui/services/settings';
+
+const { animations } = Settings.application;
 
 const LoadingScreen = ({ children }) => (
-  <div className={styles.background}>
-    <div className={styles.spinner}>
-      <div className={styles.bounce1} />
-      <div className={styles.bounce2} />
+  <Styled.Background>
+    <Styled.Spinner animations={animations}>
+      <Styled.Bounce1 animations={animations} />
+      <Styled.Bounce2 animations={animations} />
       <div />
-    </div>
-    <div className={styles.message}>
+    </Styled.Spinner>
+    <Styled.Message>
       {children}
-    </div>
-  </div>
+    </Styled.Message>
+  </Styled.Background>
 );
 
 export default LoadingScreen;
diff --git a/bigbluebutton-html5/imports/ui/components/loading-screen/styles.js b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.js
new file mode 100644
index 0000000000..b0b40dba24
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/loading-screen/styles.js
@@ -0,0 +1,72 @@
+import styled, { css, keyframes } from 'styled-components';
+import { mdPaddingX } from '/imports/ui/stylesheets/styled-components/general';
+import { loaderBg, loaderBullet, colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
+import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
+
+const Background = styled.div`
+  position: fixed;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: ${loaderBg};
+  z-index: 4;
+`;
+
+const skBouncedelay = keyframes`
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1.0);
+  }
+`;
+
+const Spinner = styled.div`
+  width: 100%;
+  text-align: center;
+  height: 22px;
+  margin-bottom: ${mdPaddingX};
+
+  & > div {
+    width: 18px;
+    height: 18px;
+    margin: 0 5px;
+    background-color: ${loaderBullet};
+    border-radius: 100%;
+    display: inline-block;
+
+    ${({ animations }) => animations && css`
+      animation: ${skBouncedelay} 1.4s infinite ease-in-out both;
+    `}
+  }
+`;
+
+const Bounce1 = styled.div`
+  ${({ animations }) => animations && `
+    animation-delay: -0.32s !important;
+  `}
+`;
+
+const Bounce2 = styled.div`
+  ${({ animations }) => animations && `
+    animation-delay: -0.16s !important;
+  `}
+`;
+
+const Message = styled.div`
+  font-size: ${fontSizeLarge};
+  color: ${colorWhite};
+  text-align: center;
+`;
+
+export default {
+  Background,
+  Spinner,
+  Bounce1,
+  Bounce2,
+  Message,
+};
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
index 5c0a1df4f1..abcbff552c 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
@@ -32,6 +32,8 @@ const btnPrimaryBorder = colorPrimary;
 
 const toolbarButtonColor = btnDefaultColor;
 const userThumbnailBorder = colorGrayLight;
+const loaderBg = colorGrayDark;
+const loaderBullet = colorWhite;
 
 export {
   colorWhite,
@@ -60,4 +62,6 @@ export {
   btnPrimaryBorder,
   toolbarButtonColor,
   userThumbnailBorder,
+  loaderBg,
+  loaderBullet,
 };