Loading Line for better loader

package.json

@@ -60,7 +60,6 @@
     "html-react-parser": "^5.0.6",
     "https-browserify": "^1.0.0",
     "jsonschema": "^1.4.0",
-    "launchdarkly-react-client-sdk": "2.27.0",
     "mixpanel-browser": "^2.42.0",
     "notistack": "^1.0.3",
     "numbro": "^2.4.0",

src/App.tsx

@@ -1,15 +1,11 @@
 import React from "react"
 import "App.css"
-import { withLDProvider } from "launchdarkly-react-client-sdk"
+
 import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
 import mixpanel from "mixpanel-browser"
 import { QueryClient, QueryClientProvider } from "react-query"
-import {
-  QueryClient as TanStackQueryClient,
-  QueryClientProvider as TanStackQueryClientProvider
-} from "@tanstack/react-query"
 
-import { Box, makeStyles, ThemeProvider } from "@material-ui/core"
+import { Box, ThemeProvider, styled } from "@material-ui/core"
 import { SnackbarProvider } from "notistack"
 
 import { DAOExplorerRouter } from "modules/explorer/router"
@@ -46,31 +42,31 @@ const queryClient = new QueryClient({
   }
 })
 
-const styles = makeStyles({
-  success: {
-    backgroundColor: "#4BCF93 !important",
-    padding: "6px 28px",
-    height: 54,
-    fontSize: 13,
-    lineHeight: "0px",
-    opacity: 1
-  },
-  error: {
-    backgroundColor: "#ED254E !important",
-    padding: "6px 28px",
-    height: 54,
-    fontSize: 13,
-    lineHeight: "0px",
-    opacity: 1
-  },
-  info: {
-    backgroundColor: "#3866F9 !important",
-    padding: "6px 28px",
-    height: 54,
-    fontSize: 13,
-    lineHeight: "0px",
-    opacity: 1
-  }
+const SuccessSnackbar = styled("div")({
+  backgroundColor: "#4BCF93 !important",
+  padding: "6px 28px",
+  height: 54,
+  fontSize: 13,
+  lineHeight: "0px",
+  opacity: 1
+})
+
+const ErrorSnackbar = styled("div")({
+  backgroundColor: "#ED254E !important",
+  padding: "6px 28px",
+  height: 54,
+  fontSize: 13,
+  lineHeight: "0px",
+  opacity: 1
+})
+
+const InfoSnackbar = styled("div")({
+  backgroundColor: "#3866F9 !important",
+  padding: "6px 28px",
+  height: 54,
+  fontSize: 13,
+  lineHeight: "0px",
+  opacity: 1
 })
 
 const MIXPANEL_TOKEN = getEnv(EnvKey.REACT_APP_MIXPANEL_TOKEN)
@@ -90,15 +86,13 @@ mixpanel.init(MIXPANEL_TOKEN, {
 mixpanel.track("Visit")
 
 const App: React.FC = () => {
-  const classes = styles()
-
   return (
     <ThemeProvider theme={theme}>
       <SnackbarProvider
         classes={{
-          variantSuccess: classes.success,
-          variantError: classes.error,
-          variantInfo: classes.info
+          variantSuccess: SuccessSnackbar.toString(),
+          variantError: ErrorSnackbar.toString(),
+          variantInfo: InfoSnackbar.toString()
         }}
       >
         <WagmiProvider config={wagmiConfig}>
@@ -168,7 +162,4 @@ const App: React.FC = () => {
 
 const env = getEnv(EnvKey.REACT_APP_ENV)
 
-export default withLDProvider({
-  clientSideID:
-    env === "PROD" ? getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) : getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV)
-})(App)
+export default App

src/components/ui/DaoCreator.tsx

@@ -1,16 +1,4 @@
-import {
-  Box,
-  Grid,
-  Paper,
-  Step,
-  StepLabel,
-  Stepper,
-  TextareaAutosize,
-  Typography,
-  styled,
-  withStyles,
-  withTheme
-} from "@material-ui/core"
+import { Grid, Paper, Stepper, TextareaAutosize, Typography, styled, withStyles, withTheme } from "@material-ui/core"
 import { InfoRounded } from "@mui/icons-material"
 import { TextField as FormikTextField } from "formik-material-ui"
 

src/components/ui/DaoExplorer.tsx

@@ -1,16 +1,4 @@
-import {
-  Box,
-  Grid,
-  Paper,
-  Step,
-  StepLabel,
-  Stepper,
-  TextareaAutosize,
-  Typography,
-  styled,
-  withStyles,
-  withTheme
-} from "@material-ui/core"
+import { styled } from "@material-ui/core"
 
 const PageLayout = styled("div")(({ theme }) => ({
   background: theme.palette.primary.dark,

src/components/ui/LoadingLine.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { makeStyles, Theme } from "@material-ui/core/styles"
+
+interface LoadingLineProps {
+  color?: string
+  height?: number
+  barWidth?: number
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  "root": {
+    width: "100%",
+    backgroundColor: theme.palette.grey[200],
+    position: "relative",
+    overflow: "hidden"
+  },
+  "bar": {
+    height: "100%",
+    position: "absolute",
+    animation: "$loadingLine 1s infinite linear"
+  },
+  "@keyframes loadingLine": {
+    "0%": {
+      transform: "translateX(-100%)"
+    },
+    "100%": {
+      transform: "translateX(400%)"
+    }
+  }
+}))
+
+export const LoadingLine: React.FC<LoadingLineProps> = ({
+  color = "#3f51b5", // Default Material-UI primary color
+  height = 2,
+  barWidth = 30
+}) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root} style={{ height: `${height}px` }}>
+      <div
+        className={classes.bar}
+        style={{
+          width: `${barWidth}%`,
+          left: `-${barWidth}%`,
+          backgroundColor: color
+        }}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label="Loading..."
+      />
+    </div>
+  )
+}

src/index.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
+
 import App from "App"
 import { TezosProvider } from "services/beacon/context"
 import { EtherlinkProvider } from "services/wagmi/context"
@@ -8,21 +8,17 @@ import dayjs from "dayjs"
 import { Web3Provider } from "services/wagmi/web3provider"
 import { NetworkProvider } from "services/useNetwork"
 
-// BigNumber.config({ DECIMAL_PLACES:  })
-
 dayjs.extend(localizedFormat)
 
-ReactDOM.render(
-  <React.StrictMode>
-    <NetworkProvider>
-      <Web3Provider>
-        <EtherlinkProvider>
-          <TezosProvider>
-            <App />
-          </TezosProvider>
-        </EtherlinkProvider>
-      </Web3Provider>
-    </NetworkProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
+// New React 18 way to render
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <NetworkProvider>
+    <Web3Provider>
+      <EtherlinkProvider>
+        <TezosProvider>
+          <App />
+        </TezosProvider>
+      </EtherlinkProvider>
+    </Web3Provider>
+  </NetworkProvider>
 )

src/modules/explorer/components/CodeCollapse.tsx

@@ -1,20 +1,12 @@
-import { Collapse, Grid, IconButton, styled, Typography } from "@material-ui/core"
-import { ProposalItem } from "modules/explorer/pages/User"
 import React, { useState } from "react"
-import { Link } from "react-router-dom"
-import { Proposal } from "services/services/dao/mappers/proposal/types"
+import { Collapse, Grid, IconButton, Typography } from "@material-ui/core"
+
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"
 import { ProposalCodeEditorInput } from "./ProposalFormInput"
 import Prism, { highlight } from "prismjs"
 import { TableContainer, TableHeader } from "components/ui/Table"
 
-const ProposalsFooter = styled(Grid)({
-  padding: "16px 46px",
-  borderTop: ".6px solid rgba(125,140,139, 0.2)",
-  minHeight: 34
-})
-
 interface Props {
   code: string
 }

src/modules/explorer/components/DAOStatsRow.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from "react"
-import { Box, Grid, styled, useTheme, Typography, Paper } from "@material-ui/core"
+import { Box, Grid, styled, Typography, Paper } from "@material-ui/core"
 import { useDAO } from "services/services/dao/hooks/useDAO"
 import { useProposals } from "services/services/dao/hooks/useProposals"
 import BigNumber from "bignumber.js"
 import { ProposalStatus } from "services/services/dao/mappers/proposal/types"
 import { useDAOID } from "../pages/DAO/router"
 import { usePolls } from "modules/lite/explorer/hooks/usePolls"
 import dayjs from "dayjs"
-import { useDAOHoldings, useDAONFTHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
+import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings"
 import { useTimeLeftInCycle } from "../hooks/useTimeLeftInCycle"
 import { useIsProposalButtonDisabled } from "services/contracts/baseDAO/hooks/useCycleInfo"
 import numbro from "numbro"

src/modules/explorer/pages/DAOList/index.tsx

@@ -25,6 +25,7 @@ import { ReactComponent as MyDAOsIcon } from "assets/img/my-daos-icon.svg"
 import { ReactComponent as MyDAOsSelectedIcon } from "assets/img/my-daos-selected-icon.svg"
 import ReactPaginate from "react-paginate"
 import "./styles.css"
+import { LoadingLine } from "components/ui/LoadingLine"
 
 const PageContainer = styled("div")(({ theme }) => ({
   width: "1000px",
@@ -115,9 +116,9 @@ const TabsContainer = styled(Grid)(({ theme }) => ({
 
 export const DAOList: React.FC = () => {
   const { network, etherlink, account } = useTezos()
-  const { data: daos, isLoading } = useAllDAOs(network)
+  const { data: daos, isLoading, isLoadingWithFirebase } = useAllDAOs(network)
 
-  console.log({ daos })
+  console.log("isLoadingWithFirebase", isLoadingWithFirebase)
   const theme = useTheme()
   const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"))
   const isMobileSmall = useMediaQuery(theme.breakpoints.down("mobile"))
@@ -285,6 +286,11 @@ export const DAOList: React.FC = () => {
               </Grid>
             </Grid>
           </Grid>
+          {isLoadingWithFirebase ? (
+            <Grid item>
+              <LoadingLine color={theme.palette.secondary.main} height={3} barWidth={40} />
+            </Grid>
+          ) : null}
           <Grid item>
             <TabPanel value={selectedTab} index={0}>
               <DAOItemGrid container justifyContent={isMobileSmall ? "center" : "flex-start"}>

src/modules/explorer/pages/ProposalDetails/components/CodeVisor.tsx

@@ -1,4 +1,4 @@
-import { Grid, styled, makeStyles } from "@material-ui/core"
+import { Grid, styled, Typography } from "@material-ui/core"
 import React, { useState } from "react"
 import { ResponsiveDialog } from "modules/explorer/components/ResponsiveDialog"
 import Prism, { highlight, plugins } from "prismjs"

src/services/beacon/hooks/useTezos.ts

@@ -100,14 +100,15 @@ export const useTezos = (): WalletConnectReturn => {
     async (newNetwork: Network) => {
       mixpanel.register({ Network: newNetwork })
       localStorage.setItem("homebase:network", newNetwork)
+      switchToNetwork(newNetwork)
       if (newNetwork.startsWith("etherlink")) {
         await handleEtherlinkNetworkChange(newNetwork)
       } else {
         await handleTezosNetworkChange(newNetwork)
       }
       queryClient.resetQueries()
     },
-    [handleEtherlinkNetworkChange, handleTezosNetworkChange, queryClient]
+    [handleEtherlinkNetworkChange, handleTezosNetworkChange, switchToNetwork, queryClient]
   )
 
   const handleTezosConnect = useCallback(

src/services/services/dao/hooks/useAllDAOs.ts

@@ -8,7 +8,7 @@ import { EtherlinkContext } from "services/wagmi/context"
 export const useAllDAOs = (network: Network) => {
   const { daos: etherinkDaos, isLoadingDaos } = useContext(EtherlinkContext)
 
-  return useQuery(
+  const queryData = useQuery(
     ["daos", network],
     async () => {
       const homebase_daos = await getDAOs(network)
@@ -38,4 +38,9 @@ export const useAllDAOs = (network: Network) => {
       enabled: !!(network && !isLoadingDaos)
     }
   )
+
+  return {
+    ...queryData,
+    isLoadingWithFirebase: isLoadingDaos
+  }
 }