fix: prevent redir till save done

opengovsg · Jul 30, 2024 · 51248f5 · 51248f5
1 parent 57d1f2f
commit 51248f5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/apps/studio/src/features/editing-experience/components/ComplexEditorStateDrawer.tsx b/apps/studio/src/features/editing-experience/components/ComplexEditorStateDrawer.tsx
@@ -133,6 +133,7 @@ export default function ComplexEditorStateDrawer(): JSX.Element {
               colorScheme="sub"
               size="sm"
               p="0.625rem"
+              isDisabled={isLoading}
               onClick={() => {
                 setPreviewPageState(savedPageState)
                 setDrawerState({ state: "root" })
@@ -172,13 +173,15 @@ export default function ComplexEditorStateDrawer(): JSX.Element {
             <Button
               w="100%"
               onClick={() => {
-                setDrawerState({ state: "root" })
                 setSavedPageState(previewPageState)
-                mutate({
-                  pageId,
-                  siteId,
-                  content: JSON.stringify(previewPageState),
-                })
+                mutate(
+                  {
+                    pageId,
+                    siteId,
+                    content: JSON.stringify(previewPageState),
+                  },
+                  { onSuccess: () => setDrawerState({ state: "root" }) },
+                )
               }}
               isLoading={isLoading}
             >

diff --git a/apps/studio/src/features/editing-experience/components/MetadataEditorStateDrawer.tsx b/apps/studio/src/features/editing-experience/components/MetadataEditorStateDrawer.tsx
@@ -20,7 +20,7 @@ export default function MetadataEditorStateDrawer(): JSX.Element {
   const [{ content: pageContent }] = trpc.page.readPageAndBlob.useSuspenseQuery(
     { siteId, pageId },
   )
-  const { mutate } = trpc.page.updatePageBlob.useMutation({
+  const { mutate, isLoading } = trpc.page.updatePageBlob.useMutation({
     onSuccess: async () => {
       await utils.page.readPageAndBlob.invalidate({ pageId, siteId })
     },
@@ -86,6 +86,7 @@ export default function MetadataEditorStateDrawer(): JSX.Element {
               colorScheme="sub"
               size="sm"
               p="0.625rem"
+              isDisabled={isLoading}
               onClick={() => {
                 setPreviewPageState(savedPageState)
                 setDrawerState({ state: "root" })
@@ -115,14 +116,19 @@ export default function MetadataEditorStateDrawer(): JSX.Element {
       >
         <Button
           w="100%"
+          isLoading={isLoading}
           onClick={() => {
-            setDrawerState({ state: "root" })
             setSavedPageState(previewPageState)
-            mutate({
-              pageId,
-              siteId,
-              content: JSON.stringify(previewPageState),
-            })
+            mutate(
+              {
+                pageId,
+                siteId,
+                content: JSON.stringify(previewPageState),
+              },
+              {
+                onSuccess: () => setDrawerState({ state: "root" }),
+              },
+            )
           }}
         >
           Save changes

diff --git a/apps/studio/src/features/editing-experience/components/TipTapComponent.tsx b/apps/studio/src/features/editing-experience/components/TipTapComponent.tsx
@@ -40,6 +40,11 @@ function TipTapComponent({ content }: TipTapComponentProps) {
   } = useDisclosure()
 
   const { pageId, siteId } = useQueryParse(editPageSchema)
+  const { mutate, isLoading } = trpc.page.updatePageBlob.useMutation({
+    onSuccess: async () => {
+      await utils.page.readPageAndBlob.invalidate({ pageId, siteId })
+    },
+  })
 
   if (!previewPageState || !savedPageState) return
 
@@ -69,11 +74,6 @@ function TipTapComponent({ content }: TipTapComponentProps) {
 
   const utils = trpc.useUtils()
 
-  const { mutate } = trpc.page.updatePageBlob.useMutation({
-    onSuccess: async () => {
-      await utils.page.readPageAndBlob.invalidate({ pageId, siteId })
-    },
-  })
   const [{ content: pageContent }] = trpc.page.readPageAndBlob.useSuspenseQuery(
     { siteId, pageId },
   )
@@ -107,6 +107,7 @@ function TipTapComponent({ content }: TipTapComponentProps) {
             colorScheme="neutral"
             color="interaction.sub.default"
             aria-label="Close add component"
+            isDisabled={isLoading}
             icon={<BiX />}
             onClick={() => {
               setDrawerState({ state: "root" })
@@ -139,14 +140,17 @@ function TipTapComponent({ content }: TipTapComponentProps) {
             <Button
               w="100%"
               onClick={() => {
-                setDrawerState({ state: "root" })
                 setSavedPageState(previewPageState)
-                mutate({
-                  pageId,
-                  siteId,
-                  content: JSON.stringify(previewPageState),
-                })
+                mutate(
+                  {
+                    pageId,
+                    siteId,
+                    content: JSON.stringify(previewPageState),
+                  },
+                  { onSuccess: () => setDrawerState({ state: "root" }) },
+                )
               }}
+              isLoading={isLoading}
             >
               Save changes
             </Button>