diff --git a/ts/rmo/components/PublicReportLoading.vue b/ts/rmo/components/PublicReportLoading.vue
new file mode 100644
index 00000000..7055e4bc
--- /dev/null
+++ b/ts/rmo/components/PublicReportLoading.vue
@@ -0,0 +1,12 @@
+<template>
+	<div class="container">
+		<div class="row min-vh-100 align-items-center justify-content-center">
+			<div class="col-auto text-center">
+				<div class="spinner-border text-primary" role="status">
+					<span class="visually-hidden">Loading...</span>
+				</div>
+				<p class="mt-3 text-muted">Loading report details...</p>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/ts/rmo/view/ComplianceDistrict.vue b/ts/rmo/view/ComplianceDistrict.vue
index a4e95cd2..dcc9e8b4 100644
--- a/ts/rmo/view/ComplianceDistrict.vue
+++ b/ts/rmo/view/ComplianceDistrict.vue
@@ -1,35 +1,16 @@
 <template>
-	<div class="container">
-		<div class="row min-vh-100 align-items-center justify-content-center">
-			<div class="col-auto text-center">
-				<div class="spinner-border text-primary" role="status">
-					<span class="visually-hidden">Loading...</span>
-				</div>
-				<p class="mt-3 text-muted">Loading report details...</p>
-			</div>
-		</div>
-	</div>
+	<PublicReportLoading />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { computedAsync } from "@vueuse/core";
 
-import type { Image } from "@/components/ImageUpload.vue";
 import { useStoreDistrict } from "@/rmo/store/district";
 import { useStoreLocal } from "@/store/local";
 import { useStorePublicReport } from "@/store/publicreport";
-import Intro from "@/rmo/content/compliance/Intro.vue";
-import LoadingOverlay from "@/components/LoadingOverlay.vue";
-import {
-	type ComplianceUpdate,
-	type District,
-	PublicReport,
-	PublicReportCompliance,
-	PublicReportComplianceOptions,
-} from "@/type/api";
-import { Contact, Address, PermissionType } from "@/type/api";
+import PublicReportLoading from "@/rmo/components/PublicReportLoading.vue";
+import { type District } from "@/type/api";
 
 interface Props {
 	slug: string;
diff --git a/ts/rmo/view/ComplianceMailer.vue b/ts/rmo/view/ComplianceMailer.vue
index 5c70774a..7900f4b0 100644
--- a/ts/rmo/view/ComplianceMailer.vue
+++ b/ts/rmo/view/ComplianceMailer.vue
@@ -1,36 +1,15 @@
 <template>
-	<div class="container">
-		<div class="row min-vh-100 align-items-center justify-content-center">
-			<div class="col-auto text-center">
-				<div class="spinner-border text-primary" role="status">
-					<span class="visually-hidden">Loading...</span>
-				</div>
-				<p class="mt-3 text-muted">Loading report details...</p>
-			</div>
-		</div>
-	</div>
+	<PublicReportLoading />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { computedAsync } from "@vueuse/core";
 
-import type { Image } from "@/components/ImageUpload.vue";
 import { useStoreDistrict } from "@/rmo/store/district";
 import { useStoreLocal } from "@/store/local";
-import { useStoreLocation } from "@/store/location";
 import { useStorePublicReport } from "@/store/publicreport";
-import Intro from "@/rmo/content/compliance/Intro.vue";
-import LoadingOverlay from "@/components/LoadingOverlay.vue";
-import {
-	type ComplianceUpdate,
-	type District,
-	PublicReport,
-	PublicReportCompliance,
-	PublicReportComplianceOptions,
-} from "@/type/api";
-import { Contact, Address, Location, PermissionType } from "@/type/api";
+import PublicReportLoading from "@/rmo/components/PublicReportLoading.vue";
 
 interface Props {
 	public_id: string;