Consistently show loading state on compliance flow button

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

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>

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() {