feat: Virtualized MessagesList flickering fix

[przemvs]

Description

Checklist

• mentions the JIRA issue in the PR name (Ex. [WPB-XXXX])
• PR has been self reviewed by the author;
• Hard-to-understand areas of the code have been commented;
• If it is a core feature, unit tests have been added;

[codecov]

Codecov Report

❌ Patch coverage is 5.26316% with 72 lines in your changes missing coverage. Please review.
✅ Project coverage is 42.83%. Comparing base (3db9902) to head (8ebe79b).
⚠️ Report is 1 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #19555      +/-   ##
==========================================
- Coverage   42.84%   42.83%   -0.02%     
==========================================
  Files        1342     1342              
  Lines       32703    32715      +12     
  Branches     7235     7240       +5     
==========================================
  Hits        14013    14013              
- Misses      17003    17015      +12     
  Partials     1687     1687              

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔗 Download Full Report Artifact

🧪 Playwright Test Summary

• ✅ Passed: 6
• ❌ Failed: 6
• ⏭ Skipped: 0
• 🔁 Flaky: 2
• 📊 Total: 14
• ⏱ Total Runtime: 905.9s (~ 15 min 6 sec)

Failed Tests:

❌ Calls in channels with device switch and screenshare (tags: TC-8754, crit-flow-web)

Location: specs/CriticalFlow/channelsCall-TC-8755.spec.ts:38
Duration: 37842ms

Errors:

TimeoutError: locator.click: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('[data-uie-name="go-next"]')


   at pageManager/webapp/pages/groupCreation.page.ts:47

  45 |
  46 |   async clickNextButton() {
> 47 |     await this.nextButton.click();
     |                           ^
  48 |   }
  49 |
  50 |   async clickCreateGroupButton() {
    at GroupCreationPage.clickNextButton (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/pageManager/webapp/pages/groupCreation.page.ts:47:27)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/channelsCall-TC-8755.spec.ts:88:40
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/channelsCall-TC-8755.spec.ts:85:5

❌ Channels Management (tags: TC-8752, crit-flow-web)

Location: specs/CriticalFlow/channelsManagement-TC-8752.spec.ts:36
Duration: 44255ms

Errors:

TimeoutError: locator.click: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('[data-uie-name="go-next"]')


   at pageManager/webapp/pages/groupCreation.page.ts:47

  45 |
  46 |   async clickNextButton() {
> 47 |     await this.nextButton.click();
     |                           ^
  48 |   }
  49 |
  50 |   async clickCreateGroupButton() {
    at GroupCreationPage.clickNextButton (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/pageManager/webapp/pages/groupCreation.page.ts:47:27)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/channelsManagement-TC-8752.spec.ts:72:33
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/channelsManagement-TC-8752.spec.ts:69:3

❌ Planning group call with sending various messages during call (tags: TC-8632, crit-flow-web)

Location: specs/CriticalFlow/groupCalls-TC-8632.spec.ts:37
Duration: 25159ms

Errors:

Error: expect(received).toBeTruthy()

Received: false

  111 |     await test.step('Owner goes full screen', async () => {
  112 |       await ownerCalling.maximizeCell();
> 113 |       expect(await ownerCalling.isFullScreenVisible()).toBeTruthy();
      |                                                        ^
  114 |     });
  115 |
  116 |     await test.step('Validation: Participants see each other', async () => {
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/groupCalls-TC-8632.spec.ts:113:56
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/groupCalls-TC-8632.spec.ts:111:5

❌ Group Video call (tags: TC-8637, crit-flow-web)

Location: specs/CriticalFlow/groupVideoCall-TC-8637.spec.ts:39
Duration: 52539ms

Errors:

TimeoutError: locator.click: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('[data-uie-name="item-call"]').locator('[data-uie-name="do-call-controls-call-accept"]')


   at pageManager/webapp/pages/calling.page.ts:66

  64 |
  65 |   async clickAcceptCallButton() {
> 66 |     await this.acceptCallButton.click();
     |                                 ^
  67 |   }
  68 |
  69 |   async clickToggleVideoButton() {
    at CallingPage.clickAcceptCallButton (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/pageManager/webapp/pages/calling.page.ts:66:33)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/groupVideoCall-TC-8637.spec.ts:147:34
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/groupVideoCall-TC-8637.spec.ts:145:16

❌ Messages in Channels (tags: TC-8753, crit-flow-web)

Location: specs/CriticalFlow/messagesInChannels-TC-8753.spec.ts:44
Duration: 36853ms

Errors:

TimeoutError: locator.click: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('[data-uie-name="go-next"]')


   at pageManager/webapp/pages/groupCreation.page.ts:47

  45 |
  46 |   async clickNextButton() {
> 47 |     await this.nextButton.click();
     |                           ^
  48 |   }
  49 |
  50 |   async clickCreateGroupButton() {
    at GroupCreationPage.clickNextButton (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/pageManager/webapp/pages/groupCreation.page.ts:47:27)
    at setupOwner (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesInChannels-TC-8753.spec.ts:78:42)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesInChannels-TC-8753.spec.ts:89:7
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesInChannels-TC-8753.spec.ts:71:5

❌ Messages in Groups (tags: TC-8751, crit-flow-web)

Location: specs/CriticalFlow/messagesInGroups-TC-8751.spec.ts:42
Duration: 44295ms

Errors:

TimeoutError: locator.waitFor: Timeout 20000ms exceeded.
Call log:
  - waiting for locator('[data-uie-name="item-message"] [data-uie-name="message-reactions"] button[data-uie-name="emoji-pill"][aria-label="1 reaction, react with +1 emoji"]').first() to be visible


   at pageManager/webapp/pages/conversation.page.ts:194

  192 |
  193 |     // Wait for at least one matching element to appear (optional timeout can be set)
> 194 |     await plusOneReactionIcon.first().waitFor({state: 'visible'});
      |                                       ^
  195 |
  196 |     return await plusOneReactionIcon.isVisible();
  197 |   }
    at ConversationPage.isPlusOneReactionVisible (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/pageManager/webapp/pages/conversation.page.ts:194:39)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesInGroups-TC-8751.spec.ts:133:46
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesInGroups-TC-8751.spec.ts:129:5

Flaky Tests:

⚠️ Setting up new device with a backup (tags: TC-8634, crit-flow-web)

Location: specs/CriticalFlow/backupRestoration-TC-8634.spec.ts:35

Attempt 1
Result: ❌ Failed
Duration: 984ms

Errors:

AxiosError: Request failed with status code 409

   at backend/userRepository.e2e.ts:35

  33 |
  34 |   public async setUniqueUsername(username: string, token: string) {
> 35 |     await this.axiosInstance.put(
     |     ^
  36 |       'self/handle',
  37 |       {handle: username},
  38 |       {
    at settle (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/node_modules/axios/lib/core/settle.js:19:12)
    at Unzip.handleStreamEnd (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/node_modules/axios/lib/adapters/http.js:599:11)
    at Axios.request (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/node_modules/axios/lib/core/Axios.js:45:41)
    at UserRepositoryE2E.setUniqueUsername (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/backend/userRepository.e2e.ts:35:5)
    at ApiManagerE2E.createPersonalUser (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/backend/apiManager.e2e.ts:97:5)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/backupRestoration-TC-8634.spec.ts:60:5
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/backupRestoration-TC-8634.spec.ts:59:3

Error: User must have an ID to be removed from createdUsers

   at utils/tearDown.util.ts:57

  55 | export const removeCreatedUser = async (api: ApiManagerE2E, user: User) => {
  56 |   if (!user.id) {
> 57 |     throw new Error('User must have an ID to be removed from createdUsers');
     |           ^
  58 |   }
  59 |   const token = user.token ?? (await api.auth.loginUser(user)).data.access_token;
  60 |   if (!token) {
    at removeCreatedUser (/home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/utils/tearDown.util.ts:57:11)
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/backupRestoration-TC-8634.spec.ts:144:26

Attempt 2
Result: ✅ Passed
Duration: 43573ms

⚠️ Messages in 1:1 (tags: TC-8750, crit-flow-web)

Location: specs/CriticalFlow/messagesIn1On1-TC-8750.spec.ts:47

Attempt 1
Result: ❌ Failed
Duration: 29636ms

Errors:

Error: expect(received).toBeTruthy()

Received: false

  131 |     // Verify that the detail view modal is visible
  132 |     expect(await memberBPM.webapp.modals.detailViewModal().isVisible()).toBeTruthy();
> 133 |     expect(await memberBPM.webapp.modals.detailViewModal().isImageVisible()).toBeTruthy();
      |                                                                              ^
  134 |   });
  135 |   await test.step('User B can download the image', async () => {
  136 |     // Click on the download button to download the image
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesIn1On1-TC-8750.spec.ts:133:78
    at /home/runner/actions-runner/_work/wire-webapp/wire-webapp/test/e2e_tests/specs/CriticalFlow/messagesIn1On1-TC-8750.spec.ts:127:3

Attempt 2
Result: ✅ Passed
Duration: 68208ms

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud