feat(LogViewer): add loading text

yuntijs · Aug 5, 2024 · 9eab5b2 · 9eab5b2
1 parent e55dfab
commit 9eab5b2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/LogViewer/index.tsx b/src/LogViewer/index.tsx
@@ -100,7 +100,12 @@ export const LogViewer: React.FC<LogViewerProps> = ({
         )}
         startFollowing
       />
-      {loading && <Icon className={styles.loader} icon={LoaderCircle} spin />}
+      {loading && (
+        <>
+          <div className={styles.loaderText}>loading ...</div>
+          <Icon className={styles.loaderIcon} icon={LoaderCircle} spin />
+        </>
+      )}
     </div>
   );
 };
diff --git a/src/LogViewer/style.ts b/src/LogViewer/style.ts
@@ -40,13 +40,23 @@ export const useStyles = createStyles(
           }
           .log-content {
             margin-left: 15px;
+            font-family: ${token.fontFamilyCode};
           }
         }
       `,
       searchBarIcon: css`
         font-size: 16px;
       `,
-      loader: css`
+      loaderText: css`
+        position: absolute;
+        top: 44px;
+        left: 15px;
+
+        font-family: ${token.fontFamilyCode};
+        font-size: 12px;
+        color: #fff;
+      `,
+      loaderIcon: css`
         position: absolute;
         right: ${token.marginSM}px;
         bottom: ${token.marginSM}px;