Don't show rebag button on load (#7320)

* Don't show rebag button on load

* Remove extra useEffect dep

* renames

packages/page-staking/src/Bags/Bag.tsx

@@ -22,7 +22,7 @@ interface Props {
   bagUpper: BN;
   index: number;
   info: PalletBagsListListBag;
-  stashNodes?: StashNode[];
+  nodesOwn?: StashNode[];
 }
 
 function getRebags (bonded: ListNode[], bagUpper: BN, bagLower: BN): string[] {
@@ -34,7 +34,7 @@ function getRebags (bonded: ListNode[], bagUpper: BN, bagLower: BN): string[] {
     .map(({ stashId }) => stashId);
 }
 
-function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactElement<Props> {
+function Bag ({ bagLower, bagUpper, info, nodesOwn }: Props): React.ReactElement<Props> {
   const [[headId, trigger], setHeadId] = useState<[AccountId32 | null, number]>([null, 0]);
   const [rebags, setRebags] = useState<string[]>([]);
   const [isLoading, setLoading] = useState(true);
@@ -42,23 +42,23 @@ function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactEleme
   const bonded = useBonded(list);
 
   useEffect((): void => {
-    info && stashNodes &&
+    info && nodesOwn &&
       setHeadId(([, trigger]) => [info.head.unwrapOr(null), ++trigger]);
-  }, [info, stashNodes]);
+  }, [info, nodesOwn]);
 
   useEffect((): void => {
     setLoading(
-      stashNodes && stashNodes.length
+      nodesOwn && nodesOwn.length
         ? !isCompleted || !bonded
         : false
     );
-  }, [bonded, isCompleted, stashNodes]);
+  }, [bonded, isCompleted, nodesOwn]);
 
   useEffect((): void => {
     !isLoading && bonded && setRebags(
       getRebags(bonded, bagUpper, bagLower)
     );
-  }, [bagLower, bagUpper, bonded, isLoading, stashNodes]);
+  }, [bagLower, bagUpper, bonded, isLoading]);
 
   return (
     <tr>
@@ -68,7 +68,7 @@ function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactEleme
       <td className='address'>{info.head.isSome && <AddressMini value={info.head} />}</td>
       <td className='address'>{info.tail.isSome && <AddressMini value={info.tail} />}</td>
       <td className='address'>
-        {stashNodes?.map(({ stashId }) => (
+        {nodesOwn?.map(({ stashId }) => (
           <Stash
             bagLower={bagLower}
             bagUpper={bagUpper}
@@ -88,11 +88,13 @@ function Bag ({ bagLower, bagUpper, info, stashNodes }: Props): React.ReactEleme
         }
       </td>
       <td className='button'>
-        <Rebag
-          bagLower={bagLower}
-          bagUpper={bagUpper}
-          stashIds={rebags}
-        />
+        {!isLoading && (
+          <Rebag
+            bagLower={bagLower}
+            bagUpper={bagUpper}
+            stashIds={rebags}
+          />
+        )}
       </td>
     </tr>
   );

packages/page-staking/src/Bags/Summary.tsx

@@ -15,17 +15,17 @@ import { useTranslation } from '../translate';
 interface Props {
   className?: string;
   ids?: BN[];
-  stashNodes?: BagMap;
+  mapOwn?: BagMap;
 }
 
-function Summary ({ className = '', ids, stashNodes }: Props): React.ReactElement<Props> {
+function Summary ({ className = '', ids, mapOwn }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const total = useCall<BN>(api.query.bagsList.counterForListNodes);
 
   const myCount = useMemo(
-    () => stashNodes && Object.values(stashNodes).reduce((count, n) => count + n.length, 0),
-    [stashNodes]
+    () => mapOwn && Object.values(mapOwn).reduce((count, n) => count + n.length, 0),
+    [mapOwn]
   );
 
   return (
@@ -38,7 +38,7 @@ function Summary ({ className = '', ids, stashNodes }: Props): React.ReactElemen
       </CardSummary>
       <section>
         <CardSummary label={t<string>('total nodes')}>
-          {stashNodes
+          {mapOwn
             ? formatNumber(total)
             : <Spinner noLabel />
           }

packages/page-staking/src/Bags/index.tsx

@@ -36,7 +36,7 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
   const [filterIndex, setFilterIndex] = useState(() => stashIds.length ? 0 : 1);
   const ids = useBagsIds();
   const list = useBagsList(ids);
-  const stashNodes = useBagsNodes(stashIds);
+  const mapOwn = useBagsNodes(stashIds);
 
   const headerRef = useRef([
     [t('bags')],
@@ -57,15 +57,15 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
     [stashIds, t]
   );
   const filtered = useMemo(
-    () => list && stashNodes && sortNodes(list, stashNodes, !filterIndex),
-    [filterIndex, list, stashNodes]
+    () => list && mapOwn && sortNodes(list, mapOwn, !filterIndex),
+    [filterIndex, list, mapOwn]
   );
 
   return (
     <>
       <Summary
         ids={ids}
-        stashNodes={stashNodes}
+        mapOwn={mapOwn}
       />
       <Button.Group>
         <ToggleGroup
@@ -83,14 +83,14 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
         emptySpinner={t<string>('Retrieving all available bags, this will take some time')}
         header={headerRef.current}
       >
-        {filtered?.map(([{ bagLower, bagUpper, index, info, key }, stashNodes]) => (
+        {filtered?.map(([{ bagLower, bagUpper, index, info, key }, nodesOwn]) => (
           <Bag
             bagLower={bagLower}
             bagUpper={bagUpper}
             index={index}
             info={info}
             key={key}
-            stashNodes={stashNodes}
+            nodesOwn={nodesOwn}
           />
         ))}
       </Table>