ui: Disable submit button while cropping

It's not immediately clear that submitting the form while the cropper is
active will not include the image _at all_.  To make this evident, we
disable the submit button until the crop is complete.

js/transaction.ts

@@ -31,6 +31,7 @@ const btncrop = photoview.querySelector(
 const btnreset = photoview.querySelector(
     " sl-icon-button[label='Start Over']",
 ) as SlIconButton;
+const btnsubmit = form.querySelector("sl-button[type='submit']") as SlButton;
 
 let cropper: Cropper | null = null;
 let initialized = false;
@@ -77,8 +78,7 @@ async function startCamera() {
 }
 
 async function submitForm(data: FormData) {
-    const btn = form.querySelector("sl-button[type='submit']") as SlButton;
-    btn.loading = true;
+    btnsubmit.loading = true;
     let r: Response | null = null;
     try {
         r = await fetch("", {
@@ -93,7 +93,7 @@ async function submitForm(data: FormData) {
             null,
         );
     }
-    btn.loading = false;
+    btnsubmit.loading = false;
     if (r) {
         if (r.ok) {
             notify("Successfully updated transaction");
@@ -115,6 +115,7 @@ async function submitForm(data: FormData) {
 }
 
 function takePhoto() {
+    btnsubmit.disabled = true;
     btnshutter.disabled = true;
     btnshutter.classList.add("invisible");
     video.pause();
@@ -162,6 +163,7 @@ btnshutter.addEventListener("click", async () => {
 });
 
 btncrop.addEventListener("click", async () => {
+    btnsubmit.disabled = false;
     if (cropper) {
         const canvas = await cropper.getCropperSelection()?.$toCanvas();
         if (canvas) {