From 918e08f95bb17143f362d0d604bfa2a5151de391 Mon Sep 17 00:00:00 2001
From: Kevin Ram <iamkevinmram@gmail.com>
Date: Mon, 25 Sep 2023 18:20:37 -0400
Subject: [PATCH 1/2] add name(s) to contributors list

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 26fc24632..aae4ee2e6 100644
--- a/README.md
+++ b/README.md
@@ -49,8 +49,12 @@ All the common types used by the packages are defined [here](./common-types/inde
 - **Jason Mun** - PM
 - **Andrew Chen** - TPM
 - **Hope Zheng** - Designer
+- **Vicky Wang** - Designer
+- **Vannessa Wong** - Designer
 - **Oscar Wang** - Developer
 - **Alyssa Zhang** - Developer
+- **Patricia Huang** - Developer
+- **Kevin Ram** - Developer
 
 ### Spring 2023
 

From 30a60e846a0ba381765277c32cea1915b53c0f36 Mon Sep 17 00:00:00 2001
From: Kevin Ram <iamkevinmram@gmail.com>
Date: Wed, 27 Sep 2023 16:02:28 -0400
Subject: [PATCH 2/2] added loading wheel, shoutouts page

---
 frontend/next-env.d.ts                        |  1 -
 .../Forms/ShoutoutsPage/ShoutoutForm.tsx      |  9 ++++++---
 .../Forms/ShoutoutsPage/ShoutoutsPage.tsx     | 20 ++++++++++++++-----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index 9bc3dd46b..4f11a03dc 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
diff --git a/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx b/frontend/src/components/Forms/ShoutoutsPage/ShoutoutForm.tsx
index 13f83209c..d1f154c4d 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..383bfcc9d 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';
@@ -7,21 +8,28 @@ import ShoutoutList from './ShoutoutList';
 import styles from './ShoutoutsPage.module.css';
 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]);
-
+  
   useEffect(() => {
     getGivenShoutouts();
   }, [userEmail, getGivenShoutouts]);
@@ -34,7 +42,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}