From 6c39e1b795ea97ac906c826b3da203b32d8076a6 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Fri, 10 Jun 2022 16:19:21 +0800
Subject: [PATCH] style(ui): loading icon (#1093)

loading icon
---
 .../src/assets/icons/loading-icon-light.svg   | 14 -----------
 packages/ui/src/assets/icons/loading-icon.svg | 24 +++++++++----------
 .../IframeConfirmModal.module.scss            |  9 +++++++
 .../ConfirmModal/IframeConfirmModal.tsx       | 12 +++++++++-
 .../LoadingLayer/LoadingIconLight.tsx         | 16 -------------
 .../components/LoadingLayer/index.module.scss | 11 ++++++---
 .../ui/src/components/LoadingLayer/index.tsx  |  1 -
 .../ui/src/containers/SocialLanding/index.tsx |  7 +++---
 packages/ui/src/pages/Consent/index.tsx       |  6 ++---
 packages/ui/src/scss/_desktop.scss            |  3 +++
 packages/ui/src/scss/_mobile.scss             |  3 +++
 11 files changed, 51 insertions(+), 55 deletions(-)
 delete mode 100644 packages/ui/src/assets/icons/loading-icon-light.svg
 delete mode 100644 packages/ui/src/components/LoadingLayer/LoadingIconLight.tsx

diff --git a/packages/ui/src/assets/icons/loading-icon-light.svg b/packages/ui/src/assets/icons/loading-icon-light.svg
deleted file mode 100644
index ac7418abe..000000000
--- a/packages/ui/src/assets/icons/loading-icon-light.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="#191C1D"/>
-  <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="#191C1D"/>
-  <rect opacity="0.72" y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="#191C1D"/>
-  <rect opacity="0.24" x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="#191C1D"/>
-  <rect opacity="0.32" x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="#191C1D"/>
-  <rect opacity="0.8" x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="#191C1D"/>
-  <rect opacity="0.64" x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="#191C1D"/>
-  <rect opacity="0.16" x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="#191C1D"/>
-  <rect opacity="0.4" x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="#191C1D"/>
-  <rect opacity="0.88" x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="#191C1D"/>
-  <rect opacity="0.56" x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="#191C1D"/>
-  <rect opacity="0.08" x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="#191C1D"/>
-</svg>
diff --git a/packages/ui/src/assets/icons/loading-icon.svg b/packages/ui/src/assets/icons/loading-icon.svg
index f9989c748..6dee33471 100644
--- a/packages/ui/src/assets/icons/loading-icon.svg
+++ b/packages/ui/src/assets/icons/loading-icon.svg
@@ -1,15 +1,15 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="#F7F8F8"/>
-  <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="#F7F8F8"/>
-  <rect opacity="0.72" y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="#F7F8F8"/>
-  <rect opacity="0.24" x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="#F7F8F8"/>
-  <rect opacity="0.32" x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="#F7F8F8"/>
-  <rect opacity="0.8" x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="#F7F8F8"/>
-  <rect opacity="0.64" x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="#F7F8F8"/>
-  <rect opacity="0.16" x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="#F7F8F8"/>
-  <rect opacity="0.4" x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="#F7F8F8"/>
-  <rect opacity="0.88" x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="#F7F8F8"/>
-  <rect opacity="0.56" x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="#F7F8F8"/>
-  <rect opacity="0.08" x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="#F7F8F8"/>
+  <rect opacity="0.48" x="15" width="2" height="8" rx="1" fill="currentColor"/>
+  <rect opacity="0.96" x="15" y="24" width="2" height="8" rx="1" fill="currentColor"/>
+  <rect opacity="0.72" y="17" width="2" height="8" rx="1" transform="rotate(-90 0 17)" fill="currentColor"/>
+  <rect opacity="0.24" x="24" y="17" width="2" height="8" rx="1" transform="rotate(-90 24 17)" fill="currentColor"/>
+  <rect opacity="0.32" x="29.3564" y="7.13403" width="2" height="8" rx="1" transform="rotate(60 29.3564 7.13403)" fill="currentColor"/>
+  <rect opacity="0.8" x="8.57227" y="19.134" width="2" height="8" rx="1" transform="rotate(60 8.57227 19.134)" fill="currentColor"/>
+  <rect opacity="0.64" x="1.64355" y="8.86597" width="2" height="8" rx="1" transform="rotate(-60 1.64355 8.86597)" fill="currentColor"/>
+  <rect opacity="0.16" x="22.4277" y="20.866" width="2" height="8" rx="1" transform="rotate(-60 22.4277 20.866)" fill="currentColor"/>
+  <rect opacity="0.4" x="23.1338" y="1.64355" width="2" height="8" rx="1" transform="rotate(30 23.1338 1.64355)" fill="currentColor"/>
+  <rect opacity="0.88" x="11.1338" y="22.4282" width="2" height="8" rx="1" transform="rotate(30 11.1338 22.4282)" fill="currentColor"/>
+  <rect opacity="0.56" x="7.13379" y="2.64355" width="2" height="8" rx="1" transform="rotate(-30 7.13379 2.64355)" fill="currentColor"/>
+  <rect opacity="0.08" x="19.1338" y="23.4282" width="2" height="8" rx="1" transform="rotate(-30 19.1338 23.4282)" fill="currentColor"/>
 </svg>
 
diff --git a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.module.scss b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.module.scss
index be0a94649..8a1072fa0 100644
--- a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.module.scss
+++ b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.module.scss
@@ -24,6 +24,15 @@
 .content {
   padding: _.unit(5);
   flex: 1;
+  @include _.flex_column;
+}
+
+iframe {
+  display: block;
+
+  &.hidden {
+    display: none;
+  }
 }
 
 
diff --git a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
index 5cca07eb6..2e0c0fce3 100644
--- a/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/IframeConfirmModal.tsx
@@ -1,9 +1,10 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import Button from '@/components/Button';
+import { LoadingIcon } from '@/components/LoadingLayer';
 
 import * as modalStyles from '../../scss/modal.module.scss';
 import * as styles from './IframeConfirmModal.module.scss';
@@ -21,6 +22,7 @@ const IframeConfirmModal = ({
   onClose,
 }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
+  const [isLoading, setIsLoading] = useState(true);
 
   return (
     <ReactModal
@@ -32,13 +34,21 @@ const IframeConfirmModal = ({
     >
       <div className={styles.container}>
         <div className={styles.content}>
+          {isLoading && <LoadingIcon />}
           <iframe
+            className={isLoading ? styles.hidden : undefined}
             role="iframe"
             src={url}
             title="terms"
             frameBorder="0"
             width="100%"
             height="100%"
+            onLoad={() => {
+              setIsLoading(false);
+            }}
+            onError={() => {
+              setIsLoading(false);
+            }}
           />
         </div>
         <div className={styles.footer}>
diff --git a/packages/ui/src/components/LoadingLayer/LoadingIconLight.tsx b/packages/ui/src/components/LoadingLayer/LoadingIconLight.tsx
deleted file mode 100644
index c634a4279..000000000
--- a/packages/ui/src/components/LoadingLayer/LoadingIconLight.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import LoadingSvg from '@/assets/icons/loading-icon-light.svg';
-
-import * as styles from './index.module.scss';
-
-type Props = {
-  className?: string;
-};
-
-const LoadingIconLight = ({ className }: Props) => (
-  <LoadingSvg className={classNames(styles.loadingIcon, className)} />
-);
-
-export default LoadingIconLight;
diff --git a/packages/ui/src/components/LoadingLayer/index.module.scss b/packages/ui/src/components/LoadingLayer/index.module.scss
index 4ed907ca3..d0dad612a 100644
--- a/packages/ui/src/components/LoadingLayer/index.module.scss
+++ b/packages/ui/src/components/LoadingLayer/index.module.scss
@@ -11,16 +11,21 @@
   z-index: 300;
 }
 
+.loadingIcon {
+  color: var(--color-loading-icon);
+  animation: rotating 1s steps(12, end) infinite;
+}
+
 .container {
   width: 60px;
   height: 60px;
   border-radius: var(--radius);
   background-color: var(--color-toast);
   @include _.flex-column;
-}
 
-.loadingIcon {
-  animation: rotating 1s steps(12, end) infinite;
+  .loadingIcon {
+    color: var(--color-loading-icon-light);
+  }
 }
 
 @keyframes rotating {
diff --git a/packages/ui/src/components/LoadingLayer/index.tsx b/packages/ui/src/components/LoadingLayer/index.tsx
index c4ec77502..ed53d2bf7 100644
--- a/packages/ui/src/components/LoadingLayer/index.tsx
+++ b/packages/ui/src/components/LoadingLayer/index.tsx
@@ -4,7 +4,6 @@ import LoadingIcon from './LoadingIcon';
 import * as styles from './index.module.scss';
 
 export { default as LoadingIcon } from './LoadingIcon';
-export { default as LoadingIconLight } from './LoadingIconLight';
 
 const LoadingLayer = () => (
   <div className={styles.overlay}>
diff --git a/packages/ui/src/containers/SocialLanding/index.tsx b/packages/ui/src/containers/SocialLanding/index.tsx
index c20fd47f4..4d240c493 100644
--- a/packages/ui/src/containers/SocialLanding/index.tsx
+++ b/packages/ui/src/containers/SocialLanding/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { useContext } from 'react';
 
-import { LoadingIcon, LoadingIconLight } from '@/components/LoadingLayer';
+import { LoadingIcon } from '@/components/LoadingLayer';
 import { PageContext } from '@/hooks/use-page-context';
 
 import * as styles from './index.module.scss';
@@ -13,16 +13,15 @@ type Props = {
 };
 
 const SocialLanding = ({ className, connectorId, isLoading = false }: Props) => {
-  const { experienceSettings, theme } = useContext(PageContext);
+  const { experienceSettings } = useContext(PageContext);
   const connector = experienceSettings?.socialConnectors.find(({ id }) => id === connectorId);
-  const Loading = theme === 'light' ? LoadingIconLight : LoadingIcon;
 
   return (
     <div className={classNames(styles.container, className)}>
       <div className={styles.connector}>
         {connector?.logo ? <img src={connector.logo} /> : connectorId}
       </div>
-      {isLoading && <Loading />}
+      {isLoading && <LoadingIcon />}
     </div>
   );
 };
diff --git a/packages/ui/src/pages/Consent/index.tsx b/packages/ui/src/pages/Consent/index.tsx
index 198666c4a..390549140 100644
--- a/packages/ui/src/pages/Consent/index.tsx
+++ b/packages/ui/src/pages/Consent/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useContext } from 'react';
 
 import { consent } from '@/apis/consent';
-import { LoadingIcon, LoadingIconLight } from '@/components/LoadingLayer';
+import { LoadingIcon } from '@/components/LoadingLayer';
 import useApi from '@/hooks/use-api';
 import { PageContext } from '@/hooks/use-page-context';
 
@@ -16,8 +16,6 @@ const Consent = () => {
       ? experienceSettings?.branding.logoUrl
       : experienceSettings?.branding.darkLogoUrl;
 
-  const Loading = theme === 'light' ? LoadingIconLight : LoadingIcon;
-
   useEffect(() => {
     void asyncConsent();
   }, [asyncConsent]);
@@ -31,7 +29,7 @@ const Consent = () => {
   return (
     <div className={styles.wrapper}>
       <img src={logoUrl} />
-      {!error && <Loading />}
+      {!error && <LoadingIcon />}
     </div>
   );
 };
diff --git a/packages/ui/src/scss/_desktop.scss b/packages/ui/src/scss/_desktop.scss
index eac35584c..8f0f0f6e0 100644
--- a/packages/ui/src/scss/_desktop.scss
+++ b/packages/ui/src/scss/_desktop.scss
@@ -36,6 +36,7 @@ $font-family: -apple-system,
   --color-dialogue: #fff;
   --color-divider: #e0e3e3;
   --color-error: #ba1b1b;
+  --color-loading-icon: #191c1d;
 }
 
 @mixin colors-dark-theme {
@@ -66,6 +67,7 @@ $font-family: -apple-system,
   --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
   --color-divider: #444748;
   --color-error: #dd3730;
+  --color-loading-icon: #f7f8f8;
 }
 
 
@@ -74,6 +76,7 @@ $font-family: -apple-system,
   --color-toast: #34353f;
   --color-toast-border: #444748;
   --color-overlay: rgba(0, 0, 0, 30%);
+  --color-loading-icon-light: #f7f8f8;
   // shadows
   --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
   --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
diff --git a/packages/ui/src/scss/_mobile.scss b/packages/ui/src/scss/_mobile.scss
index 9e5f110d0..ef012bc82 100644
--- a/packages/ui/src/scss/_mobile.scss
+++ b/packages/ui/src/scss/_mobile.scss
@@ -24,6 +24,7 @@ $font-family: -apple-system,
   --color-layer: #eff1f1;
   --color-error: #ba1b1b;
   --color-dialogue: #fff;
+  --color-loading-icon: #191c1d;
 }
 
 @mixin colors-dark-theme {
@@ -41,6 +42,7 @@ $font-family: -apple-system,
   --color-layer: #2a2c32;
   --color-error: #dd3730;
   --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
+  --color-loading-icon: #f7f8f8;
 }
 
 
@@ -49,6 +51,7 @@ $font-family: -apple-system,
   --color-toast: #34353f;
   --color-toast-border: #444748;
   --color-overlay: rgba(0, 0, 0, 30%);
+  --color-loading-icon-light: #f7f8f8;
   // shadows
   --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
 }