fix(rgb++): loading picture when loading (#411)

* fix(rgb++): loading picture when loading * feat(loading): new pic * fix(rgbdigest): fixed position * fix(rgbdigest): loading
nervosnetwork · Aug 14, 2024 · 4bc1e6d · 4bc1e6d
1 parent f531791
commit 4bc1e6d
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 28 deletions.
diff --git a/src/assets/small-spinner.svg b/src/assets/small-spinner.svg
diff --git a/src/components/AwesomeLoadings/SmallSpinner/index.tsx b/src/components/AwesomeLoadings/SmallSpinner/index.tsx
@@ -0,0 +1,7 @@
+import styles from './styles.module.scss'
+import { ReactComponent as SmallSpinner } from '../../../assets/small-spinner.svg'
+
+const Loading = () => {
+  return <SmallSpinner className={styles.container} />
+}
+export default Loading
diff --git a/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss b/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/variables.module';
+
+.container {
+  margin: 40px auto;
+  color: var(--primary-color);
+}
diff --git a/...nts/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss b/...nts/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss
@@ -8,6 +8,14 @@
   }
 }
 
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex: 1;
+}
+
 .noRecords {
   display: flex;
   background: #fff;
@@ -25,7 +33,6 @@
   gap: 16px;
   font-size: 16px;
   white-space: nowrap;
-  overflow: hidden;
   margin-bottom: 1rem;
 
   @media screen and (max-width: $mobileBreakPoint) {
@@ -144,11 +151,9 @@
 }
 
 .list {
-  max-height: 540px;
+  height: 100%;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
-
-  & > div {
-    scroll-snap-align: center;
-  }
+  display: flex;
+  flex-direction: column;
 }
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
@@ -6,11 +6,12 @@ import CloseIcon from '../../../assets/modal_close.png'
 import { TransactionRGBPPDigestContent } from './TransactionRGBPPDigestContent'
 import { explorerService } from '../../../services/ExplorerService'
 import { TransactionLeapDirection } from '../../RGBPP/types'
+import SmallSpinner from '../../AwesomeLoadings/SmallSpinner'
 
 const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Function; hash: string }) => {
   const { t } = useTranslation()
 
-  const { data, isFetched } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
+  const { data, isFetched, isLoading } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
 
   const direction = useMemo(() => {
     switch (data?.data.leapDirection) {
@@ -25,25 +26,30 @@ const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Fun
     }
   }, [data])
 
-  if (isFetched && data?.data) {
-    return (
-      <div className={styles.container}>
-        <div className={styles.header}>
-          <div className={styles.left}>
-            <span>{t('address.transaction_rgbpp_digest')}</span>
-            {direction !== TransactionLeapDirection.NONE && (
-              <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
-            )}
-          </div>
-          <button onClick={() => onClickClose()} type="button" className={styles.buttonClose}>
-            <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
-          </button>
+  return (
+    <div className={styles.container}>
+      {isLoading ? (
+        <div style={{ margin: 'auto', width: '100%', display: 'flex' }}>
+          <SmallSpinner />
         </div>
-        <TransactionRGBPPDigestContent hash={hash} digest={data?.data} isFetched={isFetched} />
-      </div>
-    )
-  }
-  return null
+      ) : (
+        <>
+          <div className={styles.header}>
+            <div className={styles.left}>
+              <span>{t('address.transaction_rgbpp_digest')}</span>
+              {direction !== TransactionLeapDirection.NONE && (
+                <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
+              )}
+            </div>
+            <button onClick={() => onClickClose()} type="button" className={styles.buttonClose}>
+              <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
+            </button>
+          </div>
+          <TransactionRGBPPDigestContent hash={hash} digest={data?.data} isFetched={isFetched} />
+        </>
+      )}
+    </div>
+  )
 }
 
 export default TransactionRGBPPDigestModal
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
@@ -4,20 +4,25 @@
   background-color: #fff;
   padding: 20px 40px;
   width: 75%;
-  margin: 15% auto;
+  max-height: 80%;
+  top: 50%;
+  left: 50%;
+  gap: 10px;
+  transform: translate(-50%, -50%);
   border-radius: 4px;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
 
   @media screen and (max-width: $mobileBreakPoint) {
     width: 90%;
     padding: 16px;
-    margin: 178px auto;
   }
 }
 
 .header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
 
   .left {
     display: flex;