Merge branch '410-merge-version-and-contract-loading-circle-in-watche…

…r-and-guard' into 'dev' fix: unified loading circles across app version, UI and contract Closes #410 See merge request ergo/rosen-bridge/ui!335
rosen-bridge · Nov 11, 2024 · c8736e0 · c8736e0
2 parents bf3b53b + b271ea2
commit c8736e0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/.changeset/chilly-cycles-battle.md b/.changeset/chilly-cycles-battle.md
@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/ui-kit': patch
+---
+
+Unified loading spinners across app versions, UI and contract displays
diff --git a/packages/ui-kit/src/components/common/AppBar.tsx b/packages/ui-kit/src/components/common/AppBar.tsx
@@ -45,8 +45,15 @@ const Root = styled(Box)(({ theme }) => ({
  * renders a appBar wrapper
  * this component set the appBar size and orientation in different screen sizes
  */
-export const AppBar: FC<AppBarProps> = (props) => {
-  const { children, logo, routes, versions, isActive, onNavigate } = props;
+export const AppBar: FC<AppBarProps> = ({
+  children,
+  logo,
+  routes,
+  versions = [],
+  isActive,
+  onNavigate,
+}) => {
+  const loadingVersions = versions.every((version) => version.value);
   return (
     <Root>
       {children}
@@ -74,25 +81,23 @@ export const AppBar: FC<AppBarProps> = (props) => {
           ))}
         </Grid>
       )}
-      {versions &&
+      {loadingVersions ? (
         versions.map((version) => (
           <Grid key={version.title} item>
-            {version.value && (
-              <Typography
-                color={version.important ? 'textPrimary' : 'textSecondary'}
-                textAlign="center"
-                variant={version.important ? 'body2' : 'subtitle2'}
-              >
-                {version.title} v{version.value}
-              </Typography>
-            )}
-            {!version.value && (
-              <Grid mb={1} container justifyContent="center">
-                <CircularProgress size={8} sx={{ alignSelf: 'center' }} />
-              </Grid>
-            )}
+            <Typography
+              color={version.important ? 'textPrimary' : 'textSecondary'}
+              textAlign="center"
+              variant={version.important ? 'body2' : 'subtitle2'}
+            >
+              {version.title} v{version.value}
+            </Typography>
           </Grid>
-        ))}
+        ))
+      ) : (
+        <Grid mb={1} container justifyContent="center">
+          <CircularProgress size={8} sx={{ alignSelf: 'center' }} />
+        </Grid>
+      )}
     </Root>
   );
 };