feat(art): switch submit button to ActionButton

components/action-button.tsx

@@ -3,10 +3,11 @@
 import type { MaybePromise } from "bun";
 import { Check } from "lucide-react";
 import type { ComponentProps, ReactNode } from "react";
-import { useEffect, useState } from "react";
+import { use, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { ActionSubmitContext } from "./action-submit-provider";
 
 export function ActionButton({
   action,
@@ -15,10 +16,11 @@ export function ActionButton({
   text,
   ...props
 }: ComponentProps<typeof Button> & {
-  action: () => MaybePromise<void>;
+  action: (() => MaybePromise<void>) | "provider";
   text?: string;
 }) {
   const [state, setState] = useState<0 | 1 | 2>(0);
+  const ctx = use(ActionSubmitContext);
 
   useEffect(() => {
     if (state !== 2) return;
@@ -33,7 +35,9 @@ export function ActionButton({
         onClick?.(ev);
         setState(1);
         try {
-          await action();
+          if (action === "provider")
+            await new Promise<void>(ctx.listenForComplete);
+          else await action();
           setState(2);
         } catch (e) {
           toast.error("An error occured!");

components/action-submit-provider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext } from "react";
+
+export type ActionSubmitContextData = {
+  listenForComplete: (complete: () => void) => void;
+};
+
+export const ActionSubmitContext = createContext<ActionSubmitContextData>({
+  listenForComplete: (r) => {
+    r();
+  },
+});