fix: set overlay state to idle when comment actions error

playground/features/comments/_components/toolbar.tsx

@@ -18,12 +18,23 @@ export const CommentToolbar = () => {
       </ToggleOverlayButton>
       {draftComments?.length ? (
         <ConfirmComments asChild>
-          <CustomButtom variant="secondary">Confirm comments</CustomButtom>
+          <CustomButtom
+            variant="secondary"
+            disabled={overlayState === "saving"}
+          >
+            {overlayState === "saving"
+              ? "Confirming comments..."
+              : "Confirm comments"}
+          </CustomButtom>
         </ConfirmComments>
       ) : null}
       {resolvingComments?.length ? (
         <ResolveComments asChild>
-          <CustomButtom>Resolve comments</CustomButtom>
+          <CustomButtom>
+            {overlayState === "resolving"
+              ? "Resolving comments..."
+              : "Resolve comments"}
+          </CustomButtom>
         </ResolveComments>
       ) : null}
     </div>

playground/features/comments/server.ts

@@ -5,10 +5,14 @@ export async function sendCommentsToDataBase(
   comments: ConfirmedComment[],
   projectId?: string,
 ) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
   console.info("Project ID:", projectId);
   console.info("Adding comments:", comments);
 }
 
 export async function resolveCommentsInDataBase(comments: ConfirmedComment[]) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
   console.info("Resolving comments:", comments);
 }

src/contexts/comment-context.tsx

@@ -289,6 +289,7 @@ export const CommentContextProvider = ({
       if (onError) {
         onError(new ConfirmError(error.message));
       }
+      dispatch({ type: "CHANGE_OVERLAYSTATE", to: "idle" });
       return { error: new ConfirmError(error.message) };
     }
 
@@ -313,11 +314,12 @@ export const CommentContextProvider = ({
       if (onError) {
         onError(new ResolveError(error.message));
       }
+      dispatch({ type: "CHANGE_OVERLAYSTATE", to: "idle" });
       return { error: new ResolveError(error.message) };
     }
 
-    dispatch({ type: "RESET_RESOLVING_COMMENTS" });
     dispatch({ type: "CHANGE_OVERLAYSTATE", to: "idle" });
+    dispatch({ type: "RESET_RESOLVING_COMMENTS" });
     return { error: null };
   };