Add isSaving to editor

frontend/components/Editor/index.tsx

@@ -16,6 +16,7 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
   const { displayDragDrop } = useDragDrop();
   const { headers } = useAuth();
   const [editableLinks, setEditableLinks] = useState<EditableLink[]>(links);
+  const [isSaving, setIsSaving] = useState(false);
 
   useEffect(() => {
     setEditableLinks(links);
@@ -44,6 +45,8 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
     ]);
 
   const onSubmit = async () => {
+    setIsSaving(true);
+
     const res = await fetch("api/editor/links", {
       method: "POST",
       headers: {
@@ -52,8 +55,11 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
       },
       body: JSON.stringify({ links: editableLinks }),
     });
+
     const updatedLinks = await res.json();
+
     setLinks(updatedLinks);
+    setIsSaving(false);
   };
 
   const onCancel = () => {
@@ -110,15 +116,15 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
           <button
             className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
             onClick={onSubmit}
-            disabled={equal(editableLinks, links)}
+            disabled={isSaving || equal(editableLinks, links)}
           >
-            Submit
+            {isSaving ? "Saving ..." : "Submit"}
           </button>
           <div className="mr-4" />
           <button
             className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
             onClick={onCancel}
-            disabled={equal(editableLinks, links)}
+            disabled={isSaving || equal(editableLinks, links)}
           >
             Cancel
           </button>