From c47eda3f132e05d014c23bc71d9f2e5bc6dc7879 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Wed, 6 Nov 2024 20:00:19 +0700
Subject: [PATCH] chore: center + single spinner

---
 src/containers/daoExplorer/daoExplorer.tsx | 41 ++++++++++------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx
index 145d9829d..2ec8fa08e 100644
--- a/src/containers/daoExplorer/daoExplorer.tsx
+++ b/src/containers/daoExplorer/daoExplorer.tsx
@@ -314,29 +314,26 @@ export const DaoExplorer = () => {
             }}
           />
         ) : (
-          <CardsWrapper>
-            {filters.quickFilter === 'featuredDaos' ? (
-              <>
-                {featuredDaoList?.map(
-                  (dao: IDao, index: React.Key | null | undefined) => (
-                    <DaoCard key={index} dao={dao} />
-                  )
-                )}
-                {isLoadingFeaturedDaos && (
-                  <Spinner size="xl" variant="primary" />
-                )}
-              </>
-            ) : (
-              <>
-                {filteredDaoList?.map(
-                  (dao: IDao, index: React.Key | null | undefined) => (
-                    <DaoCard key={index} dao={dao} />
-                  )
-                )}
-                {isLoading && <Spinner size="xl" variant="primary" />}
-              </>
+          <>
+            {(isLoading || isLoadingFeaturedDaos) && (
+              <div className="flex h-72 w-full items-center justify-center">
+                <Spinner size="xl" variant="primary" />
+              </div>
             )}
-          </CardsWrapper>
+            <CardsWrapper>
+              {filters.quickFilter === 'featuredDaos'
+                ? featuredDaoList?.map(
+                    (dao: IDao, index: React.Key | null | undefined) => (
+                      <DaoCard key={index} dao={dao} />
+                    )
+                  )
+                : filteredDaoList?.map(
+                    (dao: IDao, index: React.Key | null | undefined) => (
+                      <DaoCard key={index} dao={dao} />
+                    )
+                  )}
+            </CardsWrapper>
+          </>
         )}
       </MainContainer>
       {totalDaos != null &&