Replaced the skeleton loader with a message that no guilds are available.

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';
 
@@ -125,9 +125,7 @@ const GuildResults = () => {
                 />
               ) : null
             )
-          : Array.from({ length: 20 }).map((_, index) => (
-              <SkeletonLoader key={index} type="guild" />
-            ))}
+          : <Typography variant="h5">None Available</Typography>}
       </div>
     </Root>
   );

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

@@ -352,7 +352,13 @@ 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,7 +53,13 @@ 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>