From fc3ad8e4216ee4a2b6495f6da341005e8e5db468 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Thu, 10 Jun 2021 20:05:10 +0100
Subject: [PATCH] feat: add loading flag to sidebar

---
 new-lamassu-admin/src/components/layout/Sidebar.js | 9 ++++++---
 new-lamassu-admin/src/pages/Funding.js             | 5 +++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/new-lamassu-admin/src/components/layout/Sidebar.js b/new-lamassu-admin/src/components/layout/Sidebar.js
index 30fa432e..5320c478 100644
--- a/new-lamassu-admin/src/components/layout/Sidebar.js
+++ b/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>
   )
 }
diff --git a/new-lamassu-admin/src/pages/Funding.js b/new-lamassu-admin/src/pages/Funding.js
index 4057232c..56740033 100644
--- a/new-lamassu-admin/src/pages/Funding.js
+++ b/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}>