Merge branch 'frontend-replace-spinner'

Author: thisconnect

frontends/web/src/components/icon/assets/icons/spinner-ring-dark.svg

@@ -87,6 +87,8 @@ import starInactiveSVG from './assets/icons/star-inactive.svg';
 import syncSVG from './assets/icons/sync.svg';
 import syncLightSVG from './assets/icons/sync-light.svg';
 import selectedCheckLightSVG from './assets/icons/selected-check-light.svg';
+import spinnerRingDarkSVG from './assets/icons/spinner-ring-dark.svg';
+import spinnerRingLightSVG from './assets/icons/spinner-ring-light.svg';
 import usbSuccessSVG from './assets/icons/usb-success.svg';
 import statusInfoSVG from './assets/icons/icon-info.svg';
 import statusSuccessSVG from './assets/icons/icon-success.svg';
@@ -223,6 +225,8 @@ export const RedDot = (props: ImgProps) => (<img src={redDotSVG} draggable={fals
 export const Save = (props: ImgProps) => (<img src={saveSVG} draggable={false} {...props} />);
 export const SaveLight = (props: ImgProps) => (<img src={saveLightSVG} draggable={false} {...props} />);
 export const Shield = (props: ImgProps) => (<img src={shieldSVG} draggable={false} {...props} />);
+export const SpinnerRingDark = (props: ImgProps) => (<img src={spinnerRingDarkSVG} draggable={false} {...props} />);
+export const SpinnerRingLight = (props: ImgProps) => (<img src={spinnerRingLightSVG} draggable={false} {...props} />);
 export const Star = (props: ImgProps) => (<img src={starSVG} draggable={false} {...props} />);
 export const StarInactive = (props: ImgProps) => (<img src={starInactiveSVG} draggable={false} {...props} />);
 export const Sync = (props: ImgProps) => (<img src={syncSVG} draggable={false} {...props} />);

frontends/web/src/components/icon/assets/icons/spinner-ring-light.svg

@@ -15,10 +15,17 @@
 }
 
 .spinner {
-    display: inline-block;
+    align-items: center;
+    display: inline-flex;
+    height: 64px;
+    justify-content: center;
     position: relative;
     width: 64px;
-    height: 64px;
+}
+
+.spinner img {
+    height: 36px;
+    width: 36px;
 }
 
 .spinnerText {
@@ -27,58 +34,21 @@
     text-align: center;
 }
 
-.spinner div {
-    position: absolute;
-    top: 27px;
-    width: 11px;
-    height: 11px;
-    border-radius: 50%;
-    background: var(--color-blue);
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-
-.spinner div:nth-child(1) {
-    left: 6px;
-    animation: spinner1 0.6s infinite;
-}
-
-.spinner div:nth-child(2) {
-    left: 6px;
-    animation: spinner2 0.6s infinite;
-}
-
-.spinner div:nth-child(3) {
-    left: 26px;
-    animation: spinner2 0.6s infinite;
-}
-
-.spinner div:nth-child(4) {
-    left: 45px;
-    animation: spinner3 0.6s infinite;
-}
-
 .horizontallyCentered {
+    align-items: center;
+    display: flex;
+    height: 64px;
+    justify-content: center;
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
 }
 
-@keyframes spinner1 {
-    0% { transform: scale(0); }
-    100% { transform: scale(1); }
-}
-
-@keyframes spinner3 {
-    0% { transform: scale(1); }
-    100% { transform: scale(0); }
+.horizontallyCentered img {
+    height: 36px;
+    width: 36px;
 }
 
-@keyframes spinner2 {
-    0% { transform: translate(0, 0); }
-    100% { transform: translate(19px, 0); }
-}
-
-
 .overlay {
     position: absolute;
     top: 0;

frontends/web/src/components/icon/icon.tsx

@@ -18,14 +18,14 @@
 import { useContext } from 'react';
 import { AppContext } from '@/contexts/AppContext';
 import { MenuDark, MenuLight } from '@/components/icon';
-import { SpinnerAnimation } from './SpinnerAnimation';
+import { SpinnerRingAnimated } from './SpinnerAnimation';
 import style from './Spinner.module.css';
 
 type TProps = {
   text?: string;
 }
 
-const Spinner = ({ text }: TProps) => {
+export const Spinner = ({ text }: TProps) => {
   const { toggleSidebar } = useContext(AppContext);
 
   return (
@@ -38,15 +38,15 @@ const Spinner = ({ text }: TProps) => {
           </div>
         </div>
       </div>
+      <div className={style.spinner}>
+        <SpinnerRingAnimated />
+      </div>
       {
         text && text.split('\n').map((line, i) => (
           <p key={`${line}-${i}`} className={style.spinnerText}>{line}</p>
         ))
       }
-      <SpinnerAnimation />
       <div className={style.overlay}></div>
     </div>
   );
 };
-
-export { Spinner };

frontends/web/src/components/spinner/Spinner.module.css

@@ -14,25 +14,22 @@
  * limitations under the License.
  */
 
+import { SpinnerRingDark, SpinnerRingLight } from '../icon';
 import style from './Spinner.module.css';
 
-const SpinnerAnimation = () => {
+export const SpinnerRingAnimated = () => {
   return (
-    <div className={style.spinner}>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
+    <>
+      <SpinnerRingDark className="show-in-lightmode" />
+      <SpinnerRingLight className="show-in-darkmode" />
+    </>
   );
 };
 
-const HorizontallyCenteredSpinner = () => {
+export const HorizontallyCenteredSpinner = () => {
   return (
     <div className={style.horizontallyCentered}>
-      <SpinnerAnimation />
+      <SpinnerRingAnimated />
     </div>
   );
 };
-
-export { SpinnerAnimation, HorizontallyCenteredSpinner };

frontends/web/src/components/spinner/Spinner.tsx

@@ -9,6 +9,10 @@
 .spinnerAnimationContainer p {
   padding: 0 var(--space-default);
 }
+.spinnerAnimationContainer img {
+  height: 36px;
+  width: 36px;
+}
 
 .qrVideo {
   display: block;

frontends/web/src/components/spinner/SpinnerAnimation.tsx

@@ -16,7 +16,7 @@
 
 import { useRef } from 'react';
 import { useQRScanner } from '@/hooks/qrcodescanner';
-import { SpinnerAnimation } from '@/components/spinner/SpinnerAnimation';
+import { SpinnerRingAnimated } from '@/components/spinner/SpinnerAnimation';
 import style from './scan-qr-video.module.css';
 
 type TProps = {
@@ -39,7 +39,7 @@ export const ScanQRVideo = ({
       be hidden once the camera / video component
        gets loaded.*/}
       <div className={style.spinnerAnimationContainer}>
-        {initErrorMessage ? <p>{initErrorMessage}</p> : <SpinnerAnimation />}
+        {initErrorMessage ? <p>{initErrorMessage}</p> : <SpinnerRingAnimated />}
       </div>
       <video
         className={style.qrVideo}