Adjust multi-list loading state (#3308)

* Try infinite-scroll

* Adjust multi-list with loading

* Update package.json

packages/react-components/src/AccountName.tsx

@@ -21,7 +21,6 @@ interface Props {
   className?: string;
   defaultName?: string;
   label?: React.ReactNode;
-  noLookup?: boolean;
   onClick?: () => void;
   override?: React.ReactNode;
   // this is used by app-account/addresses to toggle editing
@@ -131,9 +130,9 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration):
   return elem;
 }
 
-function AccountName ({ children, className = '', defaultName, label, noLookup, onClick, override, toggle, value, withSidebar }: Props): React.ReactElement<Props> {
+function AccountName ({ children, className = '', defaultName, label, onClick, override, toggle, value, withSidebar }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(!noLookup && api.derive.accounts.info, [value]);
+  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info, [value]);
   const [name, setName] = useState<React.ReactNode>(() => extractName((value || '').toString(), undefined, defaultName));
   const toggleSidebar = useContext(AccountSidebarToggle);
 

packages/react-components/src/AddressMini.tsx

@@ -27,7 +27,6 @@ interface Props {
   isShort?: boolean;
   label?: React.ReactNode;
   labelBalance?: React.ReactNode;
-  noLookup?: boolean;
   summary?: React.ReactNode;
   type?: KeyringItemType;
   value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
@@ -40,7 +39,7 @@ interface Props {
   withShrink?: boolean;
 }
 
-function AddressMini ({ balance, bonded, children, className = '', iconInfo, isHighlight, isPadded = true, label, labelBalance, noLookup, summary, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false, withSidebar = true }: Props): React.ReactElement<Props> | null {
+function AddressMini ({ balance, bonded, children, className = '', iconInfo, isHighlight, isPadded = true, label, labelBalance, summary, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false, withSidebar = true }: Props): React.ReactElement<Props> | null {
   if (!value) {
     return null;
   }
@@ -64,7 +63,6 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH
             {withName
               ? (
                 <AccountName
-                  noLookup={noLookup}
                   value={value}
                   withSidebar={withSidebar}
                 />

packages/react-components/src/AddressToggle.tsx

@@ -17,7 +17,6 @@ interface Props {
   className?: string;
   isHidden?: boolean;
   filter?: string;
-  noLookup?: boolean;
   noToggle?: boolean;
   onChange?: (isChecked: boolean) => void;
   value?: boolean;
@@ -46,9 +45,9 @@ function getIsFiltered (address: string, filter?: string, info?: DeriveAccountIn
   return true;
 }
 
-function AddressToggle ({ address, className = '', filter, isHidden, noLookup, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
+function AddressToggle ({ address, className = '', filter, isHidden, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(!noLookup && api.derive.accounts.info, [address]);
+  const info = useCall<DeriveAccountInfo>(api.derive.accounts.info, [address]);
   const [isFiltered, setIsFiltered] = useState(false);
 
   useEffect((): void => {
@@ -56,7 +55,7 @@ function AddressToggle ({ address, className = '', filter, isHidden, noLookup, n
   }, [address, filter, info]);
 
   const _onClick = useCallback(
-    (): void => onChange && onChange(!value),
+    () => onChange && onChange(!value),
     [onChange, value]
   );
 
@@ -67,7 +66,6 @@ function AddressToggle ({ address, className = '', filter, isHidden, noLookup, n
     >
       <AddressMini
         className='ui--AddressToggle-address'
-        noLookup={noLookup}
         value={address}
         withSidebar={false}
       />

packages/react-components/src/InputAddressMulti/Available.tsx

@@ -27,7 +27,6 @@ function Available ({ address, filter, isHidden, onSelect }: Props): React.React
     <AddressToggle
       address={address}
       filter={filter}
-      noLookup
       noToggle
       onChange={_onSelect}
     />

packages/react-components/src/InputAddressMulti/Selected.tsx

@@ -27,7 +27,6 @@ function Selected ({ address, filter, isHidden, onDeselect }: Props): React.Reac
     <AddressToggle
       address={address}
       filter={filter}
-      noLookup
       noToggle
       onChange={_onDeselect}
     />

packages/react-components/src/InputAddressMulti/index.tsx

@@ -8,6 +8,7 @@ import { useDebounce } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Input from '../Input';
+import Spinner from '../Spinner';
 import Available from './Available';
 import Selected from './Selected';
 
@@ -27,6 +28,11 @@ function InputAddressMulti ({ available, availableLabel, className = '', default
   const [_filter, setFilter] = useState<string>('');
   const [selected, setSelected] = useState<string[]>([]);
   const filter = useDebounce(_filter);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect((): void => {
+    setTimeout(() => setIsLoading(false), 250);
+  });
 
   useEffect((): void => {
     defaultValue && setSelected(defaultValue);
@@ -84,15 +90,20 @@ function InputAddressMulti ({ available, availableLabel, className = '', default
         <div className='ui--InputAddressMulti-column'>
           <label>{availableLabel}</label>
           <div className='ui--InputAddressMulti-items'>
-            {available.map((address): React.ReactNode => (
-              <Available
-                address={address}
-                filter={filter}
-                isHidden={selected?.includes(address)}
-                key={address}
-                onSelect={_onSelect}
-              />
-            ))}
+            {isLoading
+              ? <Spinner />
+              : (
+                available.map((address) => (
+                  <Available
+                    address={address}
+                    filter={filter}
+                    isHidden={selected?.includes(address)}
+                    key={address}
+                    onSelect={_onSelect}
+                  />
+                ))
+              )
+            }
           </div>
         </div>
       </div>
@@ -135,6 +146,10 @@ export default React.memo(styled(InputAddressMulti)`
         overflow-y: auto;
         overflow-x: hidden;
 
+        .ui--Spinner {
+          margin-top: 2rem;
+        }
+
         .ui--AddressToggle {
           padding-left: 0.75rem;
         }