Reverted the previous change and only display the skeleton loader if guilds is not defined.

Author: ocielliottc

web-ui/src/components/guild-results/GuildResults.jsx

@@ -3,13 +3,13 @@ import React, { useContext, useState } from 'react';
 import GroupIcon from '@mui/icons-material/Group';
 import { Button, TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import Typography from '@mui/material/Typography';
 
 import { createGuild, getGuildLeaders } from '../../api/guild';
 import { ADD_GUILD } from '../../context/actions';
 import { AppContext } from '../../context/AppContext';
 import AddGuildModal from './EditGuildModal';
 import GuildSummaryCard from './GuildSummaryCard';
+import SkeletonLoader from '../skeleton_loader/SkeletonLoader';
 import { useQueryParameters } from '../../helpers/query-parameters';
 import './GuildResults.css';
 
@@ -113,8 +113,8 @@ const GuildResults = () => {
         </div>
       </div>
       <div className="guilds">
-        {guilds?.length
-          ? guilds?.map((guild, index) =>
+        {guilds
+          ? guilds.map((guild, index) =>
               guild.name.toLowerCase().includes(searchText.toLowerCase()) ? (
                 <GuildSummaryCard
                   key={`guild-summary-${guild.id}`}
@@ -125,7 +125,9 @@ const GuildResults = () => {
                 />
               ) : null
             )
-          : <Typography variant="h5">None Available</Typography>}
+          : Array.from({ length: 20 }).map((_, index) => (
+              <SkeletonLoader key={index} type="guild" />
+            ))}
       </div>
     </Root>
   );

web-ui/src/components/guild-results/__snapshots__/GuildResults.test.jsx.snap

@@ -352,13 +352,7 @@ exports[`renders correctly when no guilds are loaded 1`] = `
     </div>
     <div
       class="guilds"
-    >
-      <h5
-        class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
-      >
-        None Available
-      </h5>
-    </div>
+    />
   </div>
 </div>
 `;

web-ui/src/pages/__snapshots__/GuildsPage.test.jsx.snap

@@ -53,13 +53,7 @@ exports[`renders correctly 1`] = `
       </div>
       <div
         class="guilds"
-      >
-        <h5
-          class="MuiTypography-root MuiTypography-h5 css-ag7rrr-MuiTypography-root"
-        >
-          None Available
-        </h5>
-      </div>
+      />
     </div>
   </div>
 </div>