feat: add loading states for activity creation

front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx

@@ -5,6 +5,7 @@ import * as Form from '@radix-ui/react-form';
 function DynamicCanvaModal({ submitActivity, chapterId }: any) {
   const [activityName, setActivityName] = useState("");
   const [activityDescription, setActivityDescription] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleActivityNameChange = (e: any) => {
     setActivityName(e.target.value);
@@ -16,14 +17,14 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
-    console.log({ activityName, activityDescription, chapterId });
-    
-    submitActivity({
+    setIsSubmitting(true);
+    await submitActivity({
       name: activityName,
       chapterId: chapterId,
       type: "dynamic",
       org_id : "test", 
     });
+    setIsSubmitting(false);
   };
   return (
     <FormLayout onSubmit={handleSubmit}>
@@ -48,7 +49,9 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
 
       <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
         <Form.Submit asChild>
-          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
+          <ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
+            {isSubmitting ? "Submitting..." : "Create activity"}
+          </ButtonBlack>
         </Form.Submit>
       </Flex>
     </FormLayout>

front/components/Pages/CourseEdit/NewActivityModal/Video.tsx

@@ -4,6 +4,7 @@ import * as Form from '@radix-ui/react-form';
 
 function VideoModal({ submitFileActivity, chapterId }: any) {
   const [video, setVideo] = React.useState(null) as any;
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [name, setName] = React.useState("");
 
   const handleVideoChange = (event: React.ChangeEvent<any>) => {
@@ -16,7 +17,9 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
+    setIsSubmitting(true);
     let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
+    setIsSubmitting(false);
   };
 
   /* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
@@ -45,7 +48,9 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
 
       <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
         <Form.Submit asChild>
-          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
+          <ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
+            {isSubmitting ? "Uploading..." : "Create activity"}
+          </ButtonBlack>
         </Form.Submit>
       </Flex>
     </FormLayout>

front/components/UI/Form/Form.tsx

@@ -3,7 +3,7 @@ import * as Form from '@radix-ui/react-form';
 import { styled, keyframes } from '@stitches/react';
 import { blackA, violet, mauve } from '@radix-ui/colors';
 
-const FormLayout = (props: any, onSubmit : any ) => (
+const FormLayout = (props: any, onSubmit: any) => (
     <FormRoot onSubmit={props.onSubmit}>
         {props.children}
     </FormRoot>
@@ -48,7 +48,7 @@ export const inputStyles = {
     '&:hover': { boxShadow: `0 0 0 1px #edeeef` },
     '&:focus': { boxShadow: `0 0 0 2px #edeeef` },
     '&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
-    
+
 };
 
 export const Input = styled('input', {
@@ -66,6 +66,16 @@ export const Textarea = styled('textarea', {
 });
 
 export const ButtonBlack = styled('button', {
+    variants: {
+        state: {
+            "loading": {
+                pointerEvents: 'none',
+                backgroundColor: "#808080",
+            },
+            "none": {
+            },
+        },
+    },
     all: 'unset',
     display: 'inline-flex',
     alignItems: 'center',
@@ -79,7 +89,7 @@ export const ButtonBlack = styled('button', {
 
     background: "#000000",
     color: "#FFFFFF",
-    '&:hover': { backgroundColor: "#181818" , cursor: "pointer"},
+    '&:hover': { backgroundColor: "#181818", cursor: "pointer" },
     '&:focus': { boxShadow: `0 0 0 2px black` },
 });