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>