Add loading screen for session confirmation and enhance vehicle management labels

tests/unit/default-page-mobile-redirect.spec.js

@@ -11,18 +11,45 @@ vi.mock("vue-router", () => {
   };
 });
 
-vi.mock("@/components/global/PageLoader.vue", () => {
+vi.mock("@/components/global/BrandedLoadingScreen.vue", () => {
   return {
     default: defineComponent({
-      name: "MockPageLoader",
+      name: "MockBrandedLoadingScreen",
       props: {
         title: {
           type: String,
           default: "",
         },
+        subtitle: {
+          type: String,
+          default: "",
+        },
+        testId: {
+          type: String,
+          default: "branded-loading-screen",
+        },
+        statusTestId: {
+          type: String,
+          default: "",
+        },
+        ariaLabel: {
+          type: String,
+          default: "",
+        },
       },
       setup(props) {
-        return () => h("div", { "data-testid": "page-loader" }, props.title);
+        return () =>
+          h(
+            "div",
+            {
+              "data-testid": props.testId,
+              "data-aria-label": props.ariaLabel,
+            },
+            [
+              h("span", { "data-testid": props.statusTestId || undefined }, props.title),
+              props.subtitle ? h("small", props.subtitle) : null,
+            ]
+          );
       },
     }),
   };
@@ -183,6 +210,13 @@ const setAdminSession = (permissions = ["admin"]) => {
   __sessionState.token.value = "unit-token";
 };
 
+const setPendingSession = () => {
+  __sessionState.initiated.value = false;
+  __sessionState.permissions.value = [];
+  __sessionState.isSubuser.value = false;
+  __sessionState.token.value = "unit-token";
+};
+
 const setLocation = ({ latitude, longitude, timestamp = Date.now() }) => {
   __locationRef.value = {
     coords: {
@@ -215,6 +249,28 @@ describe("DefaultPage mobile department redirect", () => {
     vi.useRealTimers();
   });
 
+  it("shows the branded redirect loader while session access is still unresolved", async () => {
+    setPendingSession();
+
+    const mounted = mountDefaultPage();
+    await nextTick();
+
+    expect(mounted.get('[data-testid="redirect-loading-status"]').text()).toBe("Omdirigerer...");
+    expect(mounted.text()).toContain("Vi finder den rigtige side for dig");
+    expect(mounted.find('[data-testid="redirect-nearest-department-loading"]').exists()).toBe(false);
+  });
+
+  it("shows the branded nearest-department loader during mobile auto-selection", async () => {
+    const mounted = mountDefaultPage();
+    await nextTick();
+
+    expect(mounted.get('[data-testid="redirect-nearest-department-loading-status"]').text()).toBe(
+      "Finder din nærmeste afdeling..."
+    );
+    expect(mounted.text()).toContain("Vi bruger din placering til at vælge afdeling");
+    expect(mounted.find('[data-testid="redirect-loading"]').exists()).toBe(false);
+  });
+
   it("routes when geolocation arrives before departments finish loading", async () => {
     mountDefaultPage();
     await nextTick();