Add Spinner when generating comments

Author: EugeneOYZ1203n

src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx

@@ -1,25 +1,32 @@
+import { NonIdealState, Spinner } from "@blueprintjs/core";
 import React from "react";
 
 type Props = {
     comments: string[],
+    isLoading: boolean,
     onSelect: (comment: string) => void
 };
 
-const GradingCommentSelector : React.FC<Props> = (prop) => {
+const GradingCommentSelector : React.FC<Props> = (props) => {
 
     return (
         <div className="grading-comment-selector">
             <div className="grading-comment-selector-title">
                 Comment Suggestions: 
             </div>
-            {prop.comments.map(el => {
+
+            {props.isLoading 
+            ? <NonIdealState icon = {<Spinner />}/>
+            : <div> {props.comments.map(el => {
                 return <div 
                     className="grading-comment-selector-item"
-                    onClick={() => {prop.onSelect(el)}}
+                    onClick={() => {props.onSelect(el)}}
                 >
                     {el}
                 </div>
-            })}
+            })} </div> }
+
+            
         </div>
     )
 }

src/pages/academy/grading/subcomponents/GradingEditor.tsx

@@ -140,8 +140,8 @@ const GradingEditor: React.FC<Props> = props => {
   }
 
   const [suggestions, setSuggestions] = useState<string[]>([])
-
   const [selectedSuggestions, setSelectedSuggestions] = useState<string[]>([])
+  const [hasClickedGenerate, setHasClickedGenerate] = useState<boolean>(false)
 
   const makeInitialState = () => {
     setXpAdjustmentInput(props.xpAdjustment.toString());
@@ -352,11 +352,14 @@ const GradingEditor: React.FC<Props> = props => {
       <div>
         <GradingCommentSelector 
           onSelect={onSelectGeneratedComments}
+          isLoading={hasClickedGenerate}
           comments={suggestions}
         />
         <Button
           onClick={async ()=>{
+            setHasClickedGenerate(true)
             const resp = await getCommentSuggestions();
+            setHasClickedGenerate(false)
             setSuggestions(resp!.comments);
           }}>
           Get comments