lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add loading flag to sidebar

Browse source
This commit is contained in:
Sérgio Salgado 2021-06-10 20:05:10 +01:00 • committed by Josh Harvey
parent ae8462cff8
commit fc3ad8e421
2 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
new-lamassu-admin/src/components/layout/Sidebar.js
View file

@ -2,6 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import { P } from 'src/components/typography'
import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg' import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg' import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg' import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
@ -16,13 +17,15 @@ const Sidebar = ({
isSelected, isSelected,
onClick, onClick,
children, children,
itemRender itemRender,
loading = false
}) => { }) => {
const classes = useStyles() const classes = useStyles()
return ( return (
<div className={classes.sidebar}> <div className={classes.sidebar}>
{data && {loading && <P>Loading...</P>}
{!loading &&
data.map((it, idx) => ( data.map((it, idx) => (
<div <div
key={idx} key={idx}
@ -36,7 +39,7 @@ const Sidebar = ({
{itemRender ? itemRender(it, isSelected(it)) : displayName(it)} {itemRender ? itemRender(it, isSelected(it)) : displayName(it)}
</div> </div>
))} ))}
{children} {!loading && children}
</div> </div>
) )
} }

5
new-lamassu-admin/src/pages/Funding.js
View file

@ -107,7 +107,7 @@ const Funding = () => {
return selected && selected.cryptoCode === it.cryptoCode return selected && selected.cryptoCode === it.cryptoCode
} }
const { data: fundingResponse } = useQuery(GET_FUNDING) const { data: fundingResponse, loading } = useQuery(GET_FUNDING)
const funding = R.path(['funding'])(fundingResponse) ?? [] const funding = R.path(['funding'])(fundingResponse) ?? []
if (funding.length && !selected) { if (funding.length && !selected) {
@ -156,7 +156,8 @@ const Funding = () => {
isSelected={isSelected} isSelected={isSelected}
onClick={setSelected} onClick={setSelected}
displayName={it => it.display} displayName={it => it.display}
itemRender={itemRender}> itemRender={itemRender}
loading={loading}>
{funding.length && ( {funding.length && (
<div className={classes.total}> <div className={classes.total}>
<Label1 className={classes.totalTitle}> <Label1 className={classes.totalTitle}>