feat: add submit loader

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

@@ -1,6 +1,7 @@
 import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
 import React, { useState } from "react";
 import * as Form from '@radix-ui/react-form';
+import BarLoader from "react-spinners/BarLoader";
 
 function DynamicCanvaModal({ submitActivity, chapterId }: any) {
   const [activityName, setActivityName] = useState("");
@@ -49,8 +50,9 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
 
       <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
         <Form.Submit asChild>
-          <ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
+          <ButtonBlack  type="submit" css={{ marginTop: 10 }}>
-            {isSubmitting ? "Submitting..." : "Create activity"}
+            {isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" />
+             : "Create activity"}
           </ButtonBlack>
         </Form.Submit>
       </Flex>

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

@@ -1,6 +1,7 @@
 import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
 import React, { useState } from "react";
 import * as Form from '@radix-ui/react-form';
+import BarLoader from "react-spinners/BarLoader";
 
 function VideoModal({ submitFileActivity, chapterId }: any) {
   const [video, setVideo] = React.useState(null) as any;
@@ -48,8 +49,8 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
 
       <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
         <Form.Submit asChild>
-          <ButtonBlack state={isSubmitting ? "loading" : "none"} type="submit" css={{ marginTop: 10 }}>
+          <ButtonBlack  type="submit" css={{ marginTop: 10 }}>
-            {isSubmitting ? "Uploading..." : "Create activity"}
+            {isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" /> : "Create activity"}
           </ButtonBlack>
         </Form.Submit>
       </Flex>

front/components/Pages/CourseEdit/NewChapter.tsx

@@ -2,10 +2,12 @@ import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack }
 import { FormMessage } from "@radix-ui/react-form";
 import * as Form from '@radix-ui/react-form';
 import React, { useState } from "react";
+import BarLoader from "react-spinners/BarLoader";
 
 function NewChapterModal({ submitChapter, closeModal }: any) {
   const [chapterName, setChapterName] = useState("");
   const [chapterDescription, setChapterDescription] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleChapterNameChange = (e: any) => {
     setChapterName(e.target.value);
@@ -18,7 +20,9 @@ function NewChapterModal({ submitChapter, closeModal }: any) {
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     console.log({ chapterName, chapterDescription });
-    submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
+    setIsSubmitting(true);
+    await submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
+    setIsSubmitting(false);
   };
 
   return (
@@ -45,7 +49,10 @@ function NewChapterModal({ submitChapter, closeModal }: any) {
 
       <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
         <Form.Submit asChild>
-          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create chapter</ButtonBlack>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>
+          {isSubmitting ? <BarLoader cssOverride={{borderRadius:60,}} width={60} color="#ffffff" />
+             : "Create Chapter"}
+            </ButtonBlack>
         </Form.Submit>
       </Flex>
     </FormLayout>

front/package-lock.json

@@ -32,6 +32,7 @@
         "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0",
         "react-katex": "^3.0.1",
+        "react-spinners": "^0.13.8",
         "styled-components": "^6.0.0-beta.9",
         "swr": "^2.0.1",
         "uuid": "^9.0.0",
@@ -7042,6 +7043,15 @@
         }
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -13114,6 +13124,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "requires": {}
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

front/package.json

@@ -33,6 +33,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-katex": "^3.0.1",
+    "react-spinners": "^0.13.8",
     "styled-components": "^6.0.0-beta.9",
     "swr": "^2.0.1",
     "uuid": "^9.0.0",