added suspense

ametel01 · Dec 29, 2023 · 893122f · 893122f
1 parent 7e071f6
commit 893122f
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 61 deletions.
diff --git a/packages/testnet/frontend/src/components/boxes/CompoundsBox.tsx b/packages/testnet/frontend/src/components/boxes/CompoundsBox.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect, lazy } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import styled from "styled-components";
 import { Input } from "@mui/joy";
+import { CircularProgress } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import useUpgrade from "../../hooks/writeHooks/useUpgrade";
 import { numberWithCommas } from "../../shared/utils";
@@ -72,12 +73,14 @@ const CompoundsBox: React.FC<CompoundsBoxProps> = ({
   return (
     <Styled.Box>
       <Styled.ImageContainer>
-        <DescriptionModal
-          onClick={() => setShowTooltip(false)}
-          image={img}
-          title={title}
-          description={description}
-        />
+        <Suspense fallback={<CircularProgress />}>
+          <DescriptionModal
+            onClick={() => setShowTooltip(false)}
+            image={img}
+            title={title}
+            description={description}
+          />
+        </Suspense>
       </Styled.ImageContainer>
       <Styled.SubBox>
         <Styled.Title>{title}</Styled.Title>

diff --git a/packages/testnet/frontend/src/components/boxes/DefencesBox.tsx b/packages/testnet/frontend/src/components/boxes/DefencesBox.tsx
@@ -1,5 +1,6 @@
-import React, { useMemo, useState, lazy } from "react";
+import React, { useMemo, useState, lazy, Suspense } from "react";
 import Tooltip from "@mui/material/Tooltip";
+import { CircularProgress } from "@mui/material";
 import styled from "styled-components";
 import { Input } from "@mui/joy";
 const DescriptionModal = lazy(() => import("../modals/Description"));
@@ -87,12 +88,14 @@ const DefencesBox = ({
   const boxContent = (
     <Styled.Box>
       <Styled.ImageContainer>
-        <DescriptionModal
-          onClick={() => setShowTooltip(false)}
-          image={img}
-          title={title}
-          description={description}
-        />
+        <Suspense fallback={<CircularProgress />}>
+          <DescriptionModal
+            onClick={() => setShowTooltip(false)}
+            image={img}
+            title={title}
+            description={description}
+          />
+        </Suspense>
         <img
           src={img}
           alt={title}

diff --git a/packages/testnet/frontend/src/components/boxes/DockyardBox.tsx b/packages/testnet/frontend/src/components/boxes/DockyardBox.tsx
@@ -1,6 +1,7 @@
-import { ReactNode, lazy } from "react";
+import { ReactNode, lazy, Suspense } from "react";
 import styled from "styled-components";
 import Tooltip from "@mui/material/Tooltip";
+import { CircularProgress } from "@mui/material";
 import * as Styled from "../../shared/styled/Box";
 import { ButtonBuild } from "../ui/Button";
 import { numberWithCommas } from "../../shared/utils";
@@ -88,12 +89,14 @@ const DockyardBox = ({
   const boxContent = (
     <Styled.Box>
       <Styled.ImageContainer>
-        <DescriptionModal
-          onClick={() => setShowTooltip(false)}
-          image={img}
-          title={title}
-          description={description}
-        />
+        <Suspense fallback={<CircularProgress />}>
+          <DescriptionModal
+            onClick={() => setShowTooltip(false)}
+            image={img}
+            title={title}
+            description={description}
+          />
+        </Suspense>
         <img src={img} alt={title} />
       </Styled.ImageContainer>
       <Styled.SubBox>

diff --git a/packages/testnet/frontend/src/components/boxes/ResearchBox.tsx b/packages/testnet/frontend/src/components/boxes/ResearchBox.tsx
@@ -1,6 +1,7 @@
-import { useState, lazy } from "react";
+import { useState, lazy, Suspense } from "react";
 import styled from "styled-components";
 import Tooltip from "@mui/material/Tooltip";
+import { CircularProgress } from "@mui/material";
 import { Input } from "@mui/joy";
 import * as Styled from "../../shared/styled/Box";
 import { ButtonUpgrade } from "../ui/Button";
@@ -91,12 +92,14 @@ const ResearchBox = ({
   const boxContent = (
     <Styled.Box>
       <Styled.ImageContainer>
-        <DescriptionModal
-          onClick={() => setShowTooltip(false)}
-          image={img}
-          title={title}
-          description={description}
-        />
+        <Suspense fallback={<CircularProgress />}>
+          <DescriptionModal
+            onClick={() => setShowTooltip(false)}
+            image={img}
+            title={title}
+            description={description}
+          />
+        </Suspense>
       </Styled.ImageContainer>
       <Styled.SubBox>
         <Styled.Title>{title}</Styled.Title>

diff --git a/packages/testnet/frontend/src/components/boxes/UniverseViewBox.tsx b/packages/testnet/frontend/src/components/boxes/UniverseViewBox.tsx
@@ -1,4 +1,4 @@
-import { useMemo, lazy } from "react";
+import { useMemo, lazy, Suspense } from "react";
 import styled from "styled-components";
 import * as Styled from "../../shared/styled/Box";
 import { CircularProgress } from "@mui/material";
@@ -138,11 +138,13 @@ const UniverseViewBox = ({
     <Styled.Box style={boxStyle}>
       <Styled.ImageContainer>
         {img && planetId ? (
-          <PlanetModal
-            planetId={planetId}
-            image={img}
-            position={position ? position : ""}
-          />
+          <Suspense fallback={<CircularProgress />}>
+            <PlanetModal
+              planetId={planetId}
+              image={img}
+              position={position ? position : ""}
+            />
+          </Suspense>
         ) : (
           <CircularProgress sx={{ color: "#ffffff", opacity: "0.5" }} />
         )}
@@ -184,15 +186,17 @@ const UniverseViewBox = ({
           ownPosition={ownPositionNumberised!}
         />
         <Styled.ButtonContainer>
-          <ButtonAttackPlanet
-            noRequirements={isButtonDisabled}
-            isNoobProtected={isNoobProtected}
-            destination={position!}
-            ownFleet={ownFleet!}
-            techs={techsNumberised!}
-            ownPosition={ownPositionNumberised!}
-            planetId={planetId}
-          />
+          <Suspense fallback={<CircularProgress />}>
+            <ButtonAttackPlanet
+              noRequirements={isButtonDisabled}
+              isNoobProtected={isNoobProtected}
+              destination={position!}
+              ownFleet={ownFleet!}
+              techs={techsNumberised!}
+              ownPosition={ownPositionNumberised!}
+              planetId={planetId}
+            />
+          </Suspense>
         </Styled.ButtonContainer>
       </Styled.SubBox>
     </Styled.Box>

diff --git a/packages/testnet/frontend/src/components/buttons/CollectResources.tsx b/packages/testnet/frontend/src/components/buttons/CollectResources.tsx
@@ -1,6 +1,7 @@
-import { useState, lazy } from "react";
+import { useState, lazy, Suspense } from "react";
 import { Box } from "@mui/material";
 import { styled } from "@mui/system";
+import { CircularProgress } from "@mui/material";
 const TransactionStatus = lazy(() => import("../ui/TransactionStatus"));
 import { GAMEADDRESS } from "../../constants/addresses";
 import game from "../../constants/nogame.json";
@@ -44,10 +45,12 @@ export function UseCollectResources() {
         </StyledButton>
       </StyledBox>
       {isClicked ? (
-        <TransactionStatus
-          name="Collect Resources"
-          tx={data?.transaction_hash}
-        />
+        <Suspense fallback={<CircularProgress />}>
+          <TransactionStatus
+            name="Collect Resources"
+            tx={data?.transaction_hash}
+          />
+        </Suspense>
       ) : (
         <></>
       )}

diff --git a/packages/testnet/frontend/src/components/ui/Button.tsx b/packages/testnet/frontend/src/components/ui/Button.tsx
@@ -1,5 +1,6 @@
-import { useState, lazy } from "react";
+import { useState, lazy, Suspense } from "react";
 import { StyledButton } from "../../shared/styled/Button";
+import { CircularProgress } from "@mui/material";
 const TransactionStatus = lazy(() => import("./TransactionStatus"));
 
 interface Props {
@@ -37,7 +38,13 @@ export function ButtonUpgrade({
           Upgrade
         </StyledButton>
       )}
-      {isClicked ? <TransactionStatus name={name} tx={tx} /> : <></>}
+      {isClicked ? (
+        <Suspense fallback={<CircularProgress />}>
+          <TransactionStatus name={name} tx={tx} />
+        </Suspense>
+      ) : (
+        <></>
+      )}
       {!disabled && noRequirements && (
         <StyledButton
           disabled

diff --git a/packages/testnet/frontend/src/components/ui/DebrisFieldView.tsx b/packages/testnet/frontend/src/components/ui/DebrisFieldView.tsx
@@ -1,4 +1,4 @@
-import React, { lazy } from "react";
+import React, { lazy, Suspense } from "react";
 import { Tooltip, Box, IconButton, Modal } from "@mui/material";
 import DebrisIcon from "../../assets/uiIcons/debris.svg";
 import { useGetDebrisField } from "../../hooks/useGetDebrisField";
@@ -100,14 +100,16 @@ export function DebrisFieldView({
             disableAutoFocus={true}
           >
             <div>
-              <ButtonCollectDebris
-                onClose={handleCloseModal}
-                position={position!}
-                ownFleet={ownFleet!}
-                techs={techs!}
-                ownPosition={ownPosition!}
-                debrisField={debris}
-              />
+              <Suspense fallback={<CircularProgress />}>
+                <ButtonCollectDebris
+                  onClose={handleCloseModal}
+                  position={position!}
+                  ownFleet={ownFleet!}
+                  techs={techs!}
+                  ownPosition={ownPosition!}
+                  debrisField={debris}
+                />
+              </Suspense>
             </div>
           </Modal>
         </>

diff --git a/packages/testnet/frontend/src/views/LoginOrGenerate.tsx b/packages/testnet/frontend/src/views/LoginOrGenerate.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { FC, lazy } from "react";
+import { FC, lazy, Suspense } from "react";
 import { CircularProgress } from "@mui/material";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useDisconnect } from "@starknet-react/core";
@@ -156,7 +156,9 @@ const ConnectWalletView: FC<ConnectWalletViewProps> = ({
       return walletConnectLoading ? (
         <CircularProgress sx={{ opacity: "0.5" }} />
       ) : (
-        <ConnectWalletButton />
+        <Suspense fallback={<CircularProgress />}>
+          <ConnectWalletButton />
+        </Suspense>
       );
     }
     return null;