From 71eb21c28baf263be6d3239cfd40bf3ed1afacfa Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sat, 1 Aug 2020 14:00:30 +0200 Subject: [PATCH] Adjust multi-list loading state (#3308) * Try infinite-scroll * Adjust multi-list with loading * Update package.json --- packages/react-components/src/AccountName.tsx | 5 ++- packages/react-components/src/AddressMini.tsx | 4 +-- .../react-components/src/AddressToggle.tsx | 8 ++--- .../src/InputAddressMulti/Available.tsx | 1 - .../src/InputAddressMulti/Selected.tsx | 1 - .../src/InputAddressMulti/index.tsx | 33 ++++++++++++++----- 6 files changed, 30 insertions(+), 22 deletions(-) diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index daa2ce3e45..1f9c7a8a94 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/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 { +function AccountName ({ children, className = '', defaultName, label, onClick, override, toggle, value, withSidebar }: Props): React.ReactElement { const { api } = useApi(); - const info = useCall(!noLookup && api.derive.accounts.info, [value]); + const info = useCall(api.derive.accounts.info, [value]); const [name, setName] = useState(() => extractName((value || '').toString(), undefined, defaultName)); const toggleSidebar = useContext(AccountSidebarToggle); diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx index cac20f8a1b..7c93562e16 100644 --- a/packages/react-components/src/AddressMini.tsx +++ b/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 | 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 | null { if (!value) { return null; } @@ -64,7 +63,6 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH {withName ? ( diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx index 287cc1dcb1..a1d4a4ff8d 100644 --- a/packages/react-components/src/AddressToggle.tsx +++ b/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 | null { +function AddressToggle ({ address, className = '', filter, isHidden, noToggle, onChange, value }: Props): React.ReactElement | null { const { api } = useApi(); - const info = useCall(!noLookup && api.derive.accounts.info, [address]); + const info = useCall(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 > diff --git a/packages/react-components/src/InputAddressMulti/Available.tsx b/packages/react-components/src/InputAddressMulti/Available.tsx index 95cce082aa..2014ace61d 100644 --- a/packages/react-components/src/InputAddressMulti/Available.tsx +++ b/packages/react-components/src/InputAddressMulti/Available.tsx @@ -27,7 +27,6 @@ function Available ({ address, filter, isHidden, onSelect }: Props): React.React diff --git a/packages/react-components/src/InputAddressMulti/Selected.tsx b/packages/react-components/src/InputAddressMulti/Selected.tsx index 6c306ffd91..c46cd850c4 100644 --- a/packages/react-components/src/InputAddressMulti/Selected.tsx +++ b/packages/react-components/src/InputAddressMulti/Selected.tsx @@ -27,7 +27,6 @@ function Selected ({ address, filter, isHidden, onDeselect }: Props): React.Reac diff --git a/packages/react-components/src/InputAddressMulti/index.tsx b/packages/react-components/src/InputAddressMulti/index.tsx index 54a94133eb..fc673a7800 100644 --- a/packages/react-components/src/InputAddressMulti/index.tsx +++ b/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(''); const [selected, setSelected] = useState([]); 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
- {available.map((address): React.ReactNode => ( - - ))} + {isLoading + ? + : ( + available.map((address) => ( + + )) + ) + }
@@ -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; }