Refine picture grid success timing.

Align PicturePasswordGrid success animation timing with actual visual behavior so the promise resolves after the burst window, not just icon bounce. Keep reduced-motion users out of burst playback and make burst overlay positioning explicit. Update grid unit tests to validate burst visibility timing, reduced-motion behavior, and isolate animation tests by stubbing the burst component.

Resolves #15097

AI-assisted-by: gpt-5

Author: DXCanas

kolibri/plugins/user_auth/frontend/views/SignInPage/PictureSignIn/PicturePasswordGrid.vue

@@ -302,32 +302,43 @@
        */
       const playSuccessAnimation = () => {
         const STAGGER = 150;
-        const DURATION = 1480;
+        const ICON_BOUNCE_DURATION = 380;
+        const BURST_DURATION = 1100;
         const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
         const stagger = reduce ? 0 : STAGGER;
-        const dur = reduce ? 0 : DURATION;
+        const iconDuration = reduce ? 0 : ICON_BOUNCE_DURATION;
+        const burstDuration = reduce ? 0 : BURST_DURATION;
+        const iconCount = sequence.value.length;
+
+        if (!iconCount) {
+          return Promise.resolve();
+        }
 
         return new Promise(resolve => {
-          for (let i = 0; i < sequence.value.length; i++) {
+          for (let i = 0; i < iconCount; i++) {
             const id = sequence.value[i];
-            const isLast = i === sequence.value.length - 1;
+            const isLast = i === iconCount - 1;
             window.setTimeout(() => {
               bouncingId.value = id;
               if (isLast) {
                 arrowBouncing.value = true;
-                burstVisible.value = true;
-                window.setTimeout(() => {
-                  burstVisible.value = false;
-                }, 1100);
+                if (!reduce) {
+                  burstVisible.value = true;
+                  window.setTimeout(() => {
+                    burstVisible.value = false;
+                  }, burstDuration);
+                }
               }
               window.setTimeout(() => {
                 if (bouncingId.value === id) bouncingId.value = null;
                 if (isLast) arrowBouncing.value = false;
-              }, dur);
+              }, iconDuration);
             }, i * stagger);
           }
 
-          window.setTimeout(() => resolve(), (sequence.value.length - 1) * stagger + dur);
+          const lastStart = (iconCount - 1) * stagger;
+          const animationDuration = Math.max(lastStart + iconDuration, lastStart + burstDuration);
+          window.setTimeout(() => resolve(), animationDuration);
         });
       };
 
@@ -496,7 +507,10 @@
 
   .submit-burst {
     position: absolute;
+    top: 50%;
+    left: 50%;
     z-index: 100;
+    transform: translate(-50%, -50%);
   }
 
   .submit-icon {

kolibri/plugins/user_auth/frontend/views/SignInPage/PictureSignIn/__tests__/PicturePasswordGrid.spec.js

@@ -301,7 +301,7 @@ describe('PicturePasswordGrid', () => {
           iconStyle: 'colorful',
           showIconText: true,
         },
-        stubs: ['PicturePasswordOption', 'KIcon'],
+        stubs: ['PicturePasswordOption', 'KIcon', 'SubmitBurstAnimation'],
       });
     }
 
@@ -355,12 +355,20 @@ describe('PicturePasswordGrid', () => {
       await nextTick();
       expect(wrapper.vm.bouncingId).toBe(3);
       expect(wrapper.vm.arrowBouncing).toBe(true);
+      expect(wrapper.vm.burstVisible).toBe(true);
 
-      // After the final 380ms, bouncing clears and Promise resolves
+      // After 380ms, icon/arrow bounce is done but burst is still running
       jest.advanceTimersByTime(380);
       await nextTick();
       expect(wrapper.vm.bouncingId).toBeNull();
       expect(wrapper.vm.arrowBouncing).toBe(false);
+      expect(wrapper.vm.burstVisible).toBe(true);
+      expect(resolved).toBe(false);
+
+      // Burst duration gates completion (1100ms from last icon start)
+      jest.advanceTimersByTime(720);
+      await nextTick();
+      expect(wrapper.vm.burstVisible).toBe(false);
       expect(resolved).toBe(true);
     });
 
@@ -389,6 +397,7 @@ describe('PicturePasswordGrid', () => {
       await nextTick();
       expect(resolved).toBe(true);
       expect(wrapper.vm.arrowBouncing).toBe(false);
+      expect(wrapper.vm.burstVisible).toBe(false);
     });
   });