feat: add loading flag to sidebar

new-lamassu-admin/src/components/layout/Sidebar.js

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

new-lamassu-admin/src/pages/Funding.js

@@ -107,7 +107,7 @@ const Funding = () => {
     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) ?? []
 
   if (funding.length && !selected) {
@@ -156,7 +156,8 @@ const Funding = () => {
           isSelected={isSelected}
           onClick={setSelected}
           displayName={it => it.display}
-          itemRender={itemRender}>
+          itemRender={itemRender}
+          loading={loading}>
           {funding.length && (
             <div className={classes.total}>
               <Label1 className={classes.totalTitle}>