diff --git a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx
index c5b688a50..1225b6825 100644
--- a/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx
+++ b/frontend/src/components/Admin/AdminShoutouts/AdminShoutouts.tsx
@@ -1,5 +1,15 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Button, Form, Item, Card, Modal, Header, SemanticCOLORS, Image } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Item,
+  Card,
+  Modal,
+  Header,
+  SemanticCOLORS,
+  Image,
+  Loader
+} from 'semantic-ui-react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { Emitters } from '../../../utils';
@@ -13,11 +23,13 @@ const AdminShoutouts: React.FC = () => {
   const [earlyDate, setEarlyDate] = useState<Date>(new Date(Date.now() - 86400000 * 13.5));
   const [lastDate, setLastDate] = useState<Date>(new Date());
   const [hide, setHide] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   type ViewMode = 'ALL' | 'PRESENT' | 'HIDDEN';
   const [view, setView] = useState<ViewMode>('ALL');
 
   const updateShoutouts = useCallback(() => {
+    setLoading(true);
     if (lastDate < earlyDate) {
       Emitters.generalError.emit({
         headerMsg: 'Invalid Date Range',
@@ -27,6 +39,7 @@ const AdminShoutouts: React.FC = () => {
     if (allShoutouts.length === 0) {
       ShoutoutsAPI.getAllShoutouts().then((shoutouts) => {
         setAllShoutouts(shoutouts);
+        setLoading(false);
       });
     } else {
       const filteredShoutouts = allShoutouts
@@ -41,6 +54,7 @@ const AdminShoutouts: React.FC = () => {
         setDisplayShoutouts(filteredShoutouts.filter((shoutout) => shoutout.hidden));
       else setDisplayShoutouts(filteredShoutouts);
       setHide(false);
+      setLoading(false);
     }
   }, [allShoutouts, earlyDate, lastDate, view]);
 
@@ -231,8 +245,14 @@ const AdminShoutouts: React.FC = () => {
         </Form.Group>
       </Form>
       <div className={styles.shoutoutsListContainer}>
-        <ListTitle />
-        <DisplayList />
+        {loading ? (
+          <Loader active inline="centered" />
+        ) : (
+          <>
+            <ListTitle />
+            <DisplayList />
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx
index 13f83209c..3d398c230 100644
--- a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx
+++ b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, TextArea, Checkbox } from 'semantic-ui-react';
+import { Form, TextArea, Checkbox, Loader } from 'semantic-ui-react';
 import { useUserEmail } from '../../Common/UserProvider/UserProvider';
 import { Emitters } from '../../../utils';
 import ShoutoutsAPI from '../../../API/ShoutoutsAPI';
@@ -17,8 +17,10 @@ const ShoutoutForm: React.FC<ShoutoutFormProps> = ({ getGivenShoutouts }) => {
   const [receiver, setReceiver] = useState('');
   const [message, setMessage] = useState('');
   const [isAnon, setIsAnon] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const giveShoutout = () => {
+    setIsSubmitting(true);
     if (!receiver) {
       Emitters.generalError.emit({
         headerMsg: 'No Member Selected',
@@ -35,6 +37,7 @@ const ShoutoutForm: React.FC<ShoutoutFormProps> = ({ getGivenShoutouts }) => {
         uuid: ''
       };
       ShoutoutsAPI.giveShoutout(shoutout).then((val) => {
+        setIsSubmitting(false);
         if (val.error) {
           Emitters.generalError.emit({
             headerMsg: "Couldn't send shoutout!",
@@ -83,8 +86,8 @@ const ShoutoutForm: React.FC<ShoutoutFormProps> = ({ getGivenShoutouts }) => {
         />
       </div>
 
-      <Form.Button floated="right" onClick={giveShoutout}>
-        Send
+      <Form.Button floated="right" onClick={giveShoutout} disabled={isSubmitting}>
+        {isSubmitting ? <Loader active inline size="small" /> : 'Send'}
       </Form.Button>
     </Form>
   );
diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx
index b980c661b..635f6fe36 100644
--- a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx
+++ b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutsPage.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable no-nested-ternary */
 import React, { useState, useEffect, useCallback } from 'react';
-import { Message } from 'semantic-ui-react';
+import { Message, Loader } from 'semantic-ui-react';
 import { useUserEmail } from '../../Common/UserProvider/UserProvider';
 import { Emitters } from '../../../utils';
 import ShoutoutForm from './ShoutoutForm';
@@ -10,15 +11,21 @@ import ShoutoutsAPI from '../../../API/ShoutoutsAPI';
 const ShoutoutsPage: React.FC = () => {
   const userEmail = useUserEmail();
   const [givenShoutouts, setGivenShoutouts] = useState<Shoutout[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const getGivenShoutouts = useCallback(() => {
+    setIsLoading(true);
     ShoutoutsAPI.getShoutouts(userEmail, 'given')
-      .then((given) => setGivenShoutouts(given))
+      .then((given) => {
+        setGivenShoutouts(given);
+        setIsLoading(false);
+      })
       .catch((error) => {
         Emitters.generalError.emit({
           headerMsg: `Couldn't get given shoutouts!`,
           contentMsg: `Error was: ${error}`
         });
+        setIsLoading(false);
       });
   }, [userEmail]);
 
@@ -34,7 +41,9 @@ const ShoutoutsPage: React.FC = () => {
 
       <div className={styles.shoutoutListContainer}>
         <h2>Given Shoutouts</h2>
-        {givenShoutouts.length > 0 ? (
+        {isLoading ? (
+          <Loader active inline="centered" />
+        ) : givenShoutouts.length > 0 ? (
           <ShoutoutList
             shoutouts={givenShoutouts.sort((a, b) => a.timestamp - b.timestamp)}
             setGivenShoutouts={setGivenShoutouts}