convert loading-screen component

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;

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,
+};

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,
 };