Loading adjustments (#3469)

packages/apps/src/Content/index.tsx

@@ -48,7 +48,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
 
   return (
     <div className={className}>
-      {needsApi && (!isApiReady || !isApiConnected)
+      {(!isApiReady || !isApiConnected)
         ? (
           <div className='connecting'>
             <Spinner label={t<string>('Initializing connection')} />

packages/apps/src/Menu/Grouping.tsx

@@ -80,7 +80,7 @@ export default React.memo(styled(Grouping)`
   &:hover {
     .groupHdr,
     .groupMenu li {
-      background: rgba(254, 252, 250, 0.925);
+      background: rgba(254, 252, 250, 0.95);
     }
 
     .groupHdr {

packages/apps/src/Menu/NodeInfo.tsx

@@ -35,7 +35,7 @@ export default React.memo(styled(NodeInfo)`
   background: transparent;
   font-size: 0.9rem;
   line-height: 1.2;
-  padding: 0 1.5rem;
+  padding: 0 1.5rem 0 1rem;
   text-align: right;
 
   > div {

packages/apps/src/Menu/index.tsx

@@ -48,8 +48,6 @@ function checkVisible (name: string, { api, isApiConnected, isApiReady }: ApiPro
     return false;
   } else if (needsAccounts && !hasAccounts) {
     return false;
-  } else if (!needsApi) {
-    return true;
   } else if (!isApiReady || !isApiConnected) {
     return false;
   } else if (needsSudo && !hasSudo) {
@@ -124,11 +122,11 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
   const isLoading = !apiProps.isApiReady || !apiProps.isApiConnected;
 
   return (
-    <div className={`${className} menuBg ui--highlight--before ui--highlight--border`}>
+    <div className={`${className}${isLoading ? ' isLoading' : ''} menuBg ui--highlight--before ui--highlight--border`}>
       <div className='menuSection'>
         <ChainInfo />
         {activeRoute && (
-          <div className={`menuActive${isLoading ? ' isLoading' : ''}`}>
+          <div className='menuActive'>
             <Icon icon={activeRoute.icon} />
             <span>{activeRoute.text}</span>
           </div>
@@ -168,6 +166,14 @@ export default React.memo(styled(Menu)`
   position: relative;
   z-index: 220;
 
+  &.isLoading {
+    filter: grayscale(1);
+
+    .menuActive {
+      opacity: 0.66;
+    }
+  }
+
   &.menuBg,
   .menuBg {
     &:after {
@@ -217,10 +223,6 @@ export default React.memo(styled(Menu)`
     padding: 1rem 1.5rem;
     margin: 0 1rem;
 
-    &.isLoading {
-      background: #f5f3f1;
-    }
-
     .ui--Icon {
       margin-right: 0.5rem;
     }

packages/react-query/src/Chain.tsx

@@ -5,6 +5,8 @@
 import React from 'react';
 import { useApi } from '@polkadot/react-hooks';
 
+import { useTranslation } from './translate';
+
 interface Props {
   children?: React.ReactNode;
   className?: string;
@@ -12,11 +14,12 @@ interface Props {
 }
 
 function Chain ({ children, className = '', label }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { systemChain } = useApi();
 
   return (
     <div className={className}>
-      {label || ''}{systemChain}{children}
+      {label || ''}{systemChain || t('Unknown')}{children}
     </div>
   );
 }