From 92297253007547fc085778e474bf9b887680aa83 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 29 Apr 2026 22:27:08 +0000
Subject: [PATCH] Consistently show loading state on compliance flow button

---
 ts/rmo/content/compliance/Address.vue    | 12 +++++++---
 ts/rmo/content/compliance/Concern.vue    | 12 +++++++---
 ts/rmo/content/compliance/Contact.vue    | 12 +++++++---
 ts/rmo/content/compliance/Evidence.vue   | 14 ++++++++----
 ts/rmo/content/compliance/Permission.vue | 13 ++++++++---
 ts/rmo/content/compliance/Process.vue    |  2 +-
 ts/rmo/view/Compliance.vue               | 29 +++++++++++++++++++-----
 7 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/ts/rmo/content/compliance/Address.vue b/ts/rmo/content/compliance/Address.vue
index 45a39661..50644d47 100644
--- a/ts/rmo/content/compliance/Address.vue
+++ b/ts/rmo/content/compliance/Address.vue
@@ -19,9 +19,13 @@
 				>
 					Back
 				</RouterLink>
-				<button class="btn btn-primary flex-grow-1" @click="doContinue">
-					Continue
-				</button>
+				<ButtonLoading
+					class="flex-grow-1"
+					@click="doContinue"
+					icon="bi-caret-right-fill"
+					:loading="isUploading"
+					text="Continue"
+				/>
 			</div>
 		</main>
 	</div>
@@ -32,6 +36,7 @@ import { computed, onMounted, ref } from "vue";
 import { router } from "@/rmo/route/config";
 import type { District, PublicReportCompliance } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
+import ButtonLoading from "@/components/common/ButtonLoading.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
 import { Camera, Locator } from "@/type/map";
@@ -43,6 +48,7 @@ interface Emits {
 }
 interface Props {
 	district: District;
+	isUploading: boolean;
 	modelValue: PublicReportCompliance;
 	publicID: string;
 }
diff --git a/ts/rmo/content/compliance/Concern.vue b/ts/rmo/content/compliance/Concern.vue
index c960bd4b..99892988 100644
--- a/ts/rmo/content/compliance/Concern.vue
+++ b/ts/rmo/content/compliance/Concern.vue
@@ -91,9 +91,13 @@
 				>
 					Back
 				</RouterLink>
-				<button class="btn btn-primary flex-grow-1" @click="doContinue">
-					Continue
-				</button>
+				<ButtonLoading
+					class="flex-grow-1"
+					@click="doContinue"
+					icon="bi-caret-right-fill"
+					:loading="isUploading"
+					text="Continue"
+				/>
 			</div>
 		</main>
 	</div>
@@ -106,6 +110,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 
+import ButtonLoading from "@/components/common/ButtonLoading.vue";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ImageViewerModal, { Image } from "@/rmo/components/ImageViewerModal.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
@@ -119,6 +124,7 @@ interface Emits {
 }
 interface Props {
 	district: District;
+	isUploading: boolean;
 	modelValue: PublicReportCompliance;
 	publicID: string;
 }
diff --git a/ts/rmo/content/compliance/Contact.vue b/ts/rmo/content/compliance/Contact.vue
index c0631a79..736796bd 100644
--- a/ts/rmo/content/compliance/Contact.vue
+++ b/ts/rmo/content/compliance/Contact.vue
@@ -125,9 +125,13 @@
 				>
 					Back
 				</RouterLink>
-				<button class="btn btn-primary flex-grow-1" @click="doContinue()">
-					Continue
-				</button>
+				<ButtonLoading
+					class="flex-grow-1"
+					@click="doContinue"
+					icon="bi-caret-right-fill"
+					:loading="isUploading"
+					text="Continue"
+				/>
 			</div>
 		</main>
 	</div>
@@ -135,6 +139,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import ButtonLoading from "@/components/common/ButtonLoading.vue";
 import { router } from "@/rmo/route/config";
 import type { Contact, District, PublicReport } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
@@ -147,6 +152,7 @@ interface Emits {
 }
 interface Props {
 	district: District;
+	isUploading: boolean;
 	modelValue: PublicReport;
 	publicID: string;
 }
diff --git a/ts/rmo/content/compliance/Evidence.vue b/ts/rmo/content/compliance/Evidence.vue
index 6885627e..1a1e74b0 100644
--- a/ts/rmo/content/compliance/Evidence.vue
+++ b/ts/rmo/content/compliance/Evidence.vue
@@ -150,9 +150,13 @@
 				<RouterLink class="btn btn-outline-secondary" :to="toBack()">
 					Back
 				</RouterLink>
-				<button class="btn btn-primary flex-grow-1" @click="doContinue">
-					Continue
-				</button>
+				<ButtonLoading
+					class="flex-grow-1"
+					@click="doContinue"
+					icon="bi-caret-right-fill"
+					:loading="isUploading"
+					text="Continue"
+				/>
 			</div>
 		</main>
 	</div>
@@ -160,12 +164,13 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import ButtonLoading from "@/components/common/ButtonLoading.vue";
 import { router } from "@/rmo/route/config";
-import type { District, PublicReportCompliance } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ImageUpload, { Image } from "@/components/ImageUpload.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import { useRoutes } from "@/rmo/route/use";
+import type { District, PublicReportCompliance } from "@/type/api";
 
 interface Emits {
 	(e: "update:modelValue", value: PublicReportCompliance): void;
@@ -173,6 +178,7 @@ interface Emits {
 }
 interface Props {
 	district: District;
+	isUploading: boolean;
 	modelValue: PublicReportCompliance;
 	publicID: string;
 }
diff --git a/ts/rmo/content/compliance/Permission.vue b/ts/rmo/content/compliance/Permission.vue
index 1cccab17..24205296 100644
--- a/ts/rmo/content/compliance/Permission.vue
+++ b/ts/rmo/content/compliance/Permission.vue
@@ -274,15 +274,21 @@
 				>
 					Back
 				</RouterLink>
-				<button class="btn btn-primary flex-grow-1" @click="doContinue">
-					Continue
-				</button>
+				<ButtonLoading
+					class="flex-grow-1"
+					@click="doContinue"
+					icon="bi-caret-right-fill"
+					:loading="isUploading"
+					text="Continue"
+				/>
 			</div>
 		</main>
 	</div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+
+import ButtonLoading from "@/components/common/ButtonLoading.vue";
 import { router } from "@/rmo/route/config";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
@@ -299,6 +305,7 @@ interface Emits {
 }
 interface Props {
 	district: District;
+	isUploading: boolean;
 	modelValue: PublicReportCompliance;
 	publicID: string;
 }
diff --git a/ts/rmo/content/compliance/Process.vue b/ts/rmo/content/compliance/Process.vue
index b840424f..5d38bbe1 100644
--- a/ts/rmo/content/compliance/Process.vue
+++ b/ts/rmo/content/compliance/Process.vue
@@ -145,7 +145,7 @@
 				<RouterLink
 					class="btn btn-primary flex-grow-1"
 					:to="routes.ComplianceSubmit(publicID)"
-				>
+					><i class="bi bi-caret-right-fill"></i>
 					Continue
 				</RouterLink>
 			</div>
diff --git a/ts/rmo/view/Compliance.vue b/ts/rmo/view/Compliance.vue
index 8faa869d..4d01fd7d 100644
--- a/ts/rmo/view/Compliance.vue
+++ b/ts/rmo/view/Compliance.vue
@@ -31,6 +31,7 @@ body > .container-fluid {
 					@doEvidence="doEvidence"
 					@doPermission="doPermission"
 					@doSubmit="doSubmit"
+					:isUploading="isUploading"
 					:publicID="report?.public_id ?? 'unset'"
 					v-model="report"
 				/>
@@ -111,8 +112,11 @@ function doAddress() {
 		return;
 	}
 	console.log("address done", report.value.address);
+	isUploading.value = true;
 	updateReport({
 		address: report.value.address,
+	}).finally(() => {
+		isUploading.value = false;
 	});
 }
 function doEvidence(images: Image[]) {
@@ -120,12 +124,19 @@ function doEvidence(images: Image[]) {
 		console.log("can't do evidence, null report");
 		return;
 	}
-	uploadImages(images);
-	if (report.value.comments) {
-		updateReport({
-			comments: report.value.comments,
-		});
-	}
+	(async () => {
+		isUploading.value = true;
+		let todo = [uploadImages(images)];
+		if (report.value && report.value.comments) {
+			todo.push(
+				updateReport({
+					comments: report.value.comments,
+				}),
+			);
+		}
+		await Promise.all(todo);
+		isUploading.value = false;
+	})();
 }
 function doContact() {
 	if (!report.value) {
@@ -137,8 +148,11 @@ function doContact() {
 		JSON.stringify(report.value.reporter),
 		report.value.reporter,
 	);
+	isUploading.value = true;
 	updateReport({
 		reporter: report.value.reporter,
+	}).finally(() => {
+		isUploading.value = false;
 	});
 }
 async function doMounted() {
@@ -154,6 +168,7 @@ function doPermission() {
 		return;
 	}
 	console.log("report.value.has_dog", report.value.has_dog);
+	isUploading.value = true;
 	updateReport({
 		access_instructions: report.value.access_instructions,
 		availability_notes: report.value.availability_notes,
@@ -161,6 +176,8 @@ function doPermission() {
 		has_dog: report.value.has_dog,
 		permission_type: report.value.permission_type,
 		wants_scheduled: report.value.wants_scheduled,
+	}).finally(() => {
+		isUploading.value = false;
 	});
 }
 function doSubmit() {