Skip to content

chore(IT-wallet): [SIW-3653] Add animated Image component with play/pause button for nfc preparation screen#7860

Draft
DavideOnano wants to merge 2 commits intomasterfrom
SIW-3653/chore-add-play-pause-button-nfc-screen
Draft

chore(IT-wallet): [SIW-3653] Add animated Image component with play/pause button for nfc preparation screen#7860
DavideOnano wants to merge 2 commits intomasterfrom
SIW-3653/chore-add-play-pause-button-nfc-screen

Conversation

@DavideOnano
Copy link
Collaborator

Short description

This PR introduces play/pause control and autostop for the CIE NFC preparation animated image.

List of changes proposed in this pull request

  • Add controlled animation UI for CIE NFC preparation
  • Add reusable playback hook and make preparation content image rendering more flexible
  • Add cie nfc static png
  • Updated shared preparation content component to support:
    • default imageSrc
    • optional imageComponent override

How to test

  1. Launch the app and enter the IT-Wallet identification flow until ItwCiePreparationNfcScreen.
  2. Verify the animation is shown with a play/pause icon button above the main CTA.
  3. Tap pause: animation stops
  4. Tap play: animation restarts from the beginning.
  5. Wait without interaction: animation auto-stops after the configured timeout.
  6. Enable system “Reduce Motion” and reopen the same screen:
    • animation should not play
    • control should remain non-interactive.
  7. Navigate through other CIE preparation screens (PIN/CARD/CAN) and verify no regressions in image rendering/layout.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 11, 2026

Jira Pull Request Link

This Pull Request refers to Jira issues:

@github-actions
Copy link
Contributor

PR Title Validation for conventional commit type

All good! PR title follows the conventional commit type.

@DavideOnano DavideOnano added the a11y Activities related to accessibility label Feb 11, 2026
@DavideOnano DavideOnano changed the title chore(IT-wallet): [SIW-3653] (a11y) Add animated Image component with play/pause button for nfc preparation screen chore(IT-wallet): [SIW-3653] Add animated Image component with play/pause button for nfc preparation screen Feb 11, 2026
@codecov
Copy link

codecov bot commented Feb 11, 2026

Codecov Report

❌ Patch coverage is 7.89474% with 35 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.42%. Comparing base (d91e90c) to head (969a0de).
⚠️ Report is 3 commits behind head on master.

Files with missing lines Patch % Lines
...on/cie/hooks/useCiePreparationAnimationPlayback.ts 4.34% 22 Missing ⚠️
.../cie/components/ItwCiePreparationAnimatedImage.tsx 15.38% 11 Missing ⚠️
.../cie/components/ItwCiePreparationScreenContent.tsx 0.00% 2 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #7860      +/-   ##
==========================================
- Coverage   60.47%   60.42%   -0.05%     
==========================================
  Files        1942     1944       +2     
  Lines       42840    42878      +38     
  Branches     9825     9913      +88     
==========================================
+ Hits        25907    25910       +3     
- Misses      16854    16879      +25     
- Partials       79       89      +10     
Files with missing lines Coverage Δ
...ication/cie/screens/ItwCiePreparationNfcScreen.tsx 9.09% <ø> (ø)
.../cie/components/ItwCiePreparationScreenContent.tsx 50.00% <0.00%> (-25.00%) ⬇️
.../cie/components/ItwCiePreparationAnimatedImage.tsx 15.38% <15.38%> (ø)
...on/cie/hooks/useCiePreparationAnimationPlayback.ts 4.34% <4.34%> (ø)

... and 16 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d91e90c...969a0de. Read the comment docs.

🚀 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Activities related to accessibility dont-merge ✋ IT Wallet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant