Stabilize self-serve question loading layout

src/components/displays/selfServe/SelfServeQuestionsStep.vue

@@ -43,9 +43,10 @@ const emitAnswerQuestion = (questionId: number, value: boolean) => {
 
       <div class="self-serve-questions-status-slot" aria-live="polite">
         <div
-          v-if="isLoading"
           class="notification is-info is-light py-2 px-3 mb-0"
+          :class="{ 'is-invisible': !isLoading }"
           data-testid="self-serve-questions-inline-loading"
+          :aria-hidden="!isLoading"
         >
           <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-small" />
           <span class="ml-2">{{ $t("self_wash.loading_data") }}</span>
@@ -72,4 +73,8 @@ const emitAnswerQuestion = (questionId: number, value: boolean) => {
 .self-serve-questions-status-slot .notification {
   width: 100%;
 }
+
+.self-serve-questions-status-slot .notification.is-invisible {
+  visibility: hidden;
+}
 </style>

tests/e2e/self-serve-wash.spec.js

@@ -983,6 +983,7 @@ test.describe("Self-serve wash", () => {
       permissions: ["user"],
       selfServe: true,
     });
+    api.selfServe.answerResponseDelayMs = 1000;
     const preview = api.selfServe.previewByKey["7:AB12345"];
     const primaryQuestion = preview.questions[0];
     const followUpQuestion = {
@@ -1016,7 +1017,29 @@ test.describe("Self-serve wash", () => {
       .poll(async () => questionCards.evaluateAll((cards) => cards.map((card) => card.getAttribute("data-testid"))))
       .toEqual(["self-serve-question-11", "self-serve-question-21"]);
 
-    const firstQuestionBefore = await page.getByTestId("self-serve-question-11").boundingBox();
+    const firstQuestion = page.getByTestId("self-serve-question-11");
+    let stableQuestionBoxSamples = 0;
+    let previousQuestionBoxKey = "";
+    await expect
+      .poll(
+        async () => {
+          const [box, viewport] = await Promise.all([firstQuestion.boundingBox(), page.viewportSize()]);
+          if (!box || !viewport || box.x < 0 || box.x >= viewport.width / 2) {
+            stableQuestionBoxSamples = 0;
+            previousQuestionBoxKey = "";
+            return false;
+          }
+
+          const boxKey = [box.x, box.y, box.width, box.height].map((value) => Math.round(value)).join(":");
+          stableQuestionBoxSamples = boxKey === previousQuestionBoxKey ? stableQuestionBoxSamples + 1 : 0;
+          previousQuestionBoxKey = boxKey;
+          return stableQuestionBoxSamples >= 2;
+        },
+        { timeout: 10_000 }
+      )
+      .toBe(true);
+
+    const firstQuestionBefore = await firstQuestion.boundingBox();
     expect(firstQuestionBefore).not.toBeNull();
 
     const reorderedAnsweredQuestions = [{ ...followUpQuestion }, { ...primaryQuestion, answer: false }];
@@ -1036,7 +1059,7 @@ test.describe("Self-serve wash", () => {
     await expect(noButton).toHaveClass(/is-danger/);
     await expect(noButton).not.toHaveClass(/is-light/);
     await expect(page.getByTestId("self-serve-questions-inline-loading")).toBeVisible();
-    const firstQuestionWhileLoading = await page.getByTestId("self-serve-question-11").boundingBox();
+    const firstQuestionWhileLoading = await firstQuestion.boundingBox();
     expect(firstQuestionWhileLoading).not.toBeNull();
     expect(Math.abs((firstQuestionWhileLoading?.y || 0) - (firstQuestionBefore?.y || 0))).toBeLessThanOrEqual(4);