Skip to content

WooPOS: Add shimmer loading to refund dialog#15538

Merged
samiuelson merged 7 commits intotrunkfrom
woomob-1861-woo-pos-add-animations
Mar 18, 2026
Merged

WooPOS: Add shimmer loading to refund dialog#15538
samiuelson merged 7 commits intotrunkfrom
woomob-1861-woo-pos-add-animations

Conversation

@samiuelson
Copy link
Contributor

@samiuelson samiuelson commented Mar 13, 2026

WOOMOB-1861

Description

  1. The refund dialog's loading state previously showed a plain spinner (LoadingContent), which caused a jarring visual jump when transitioning to the item selection screen. This PR replaces it with a shimmer skeleton that mirrors the real SelectItemsContent layout, and improves the confirm step's processing state.
  2. It replaces spinner also in the "Confirm Refund" step, by using loading button state.
  3. Animations have been added to make transitions between dialog steps smooth.

Changes:

  • Widen SelectItemsContent to accept WooPosRefundState (not just Content), rendering shimmer item rows when state is Loading
  • Remove the separate LoadingContent spinner composable
  • Show the close (X) button during loading so users can dismiss the dialog early
  • Add AnimatedContent fade transitions between refund dialog states and between refund steps
  • Use WooPosButton loading state instead of a standalone spinner during refund confirmation — the "Yes, proceed" button now shows a built-in spinner while "Back" is disabled

Test Steps

  1. Open an order and tap "Issue Refund"
  2. Verify a shimmer skeleton appears (header, shimmer item rows, disabled button) while loading
  3. Verify the refunds states transitions smoothly with animation
  4. Select items and proceed to the confirm step — tap "Yes, proceed" and verify the button shows an inline loading spinner (not a standalone spinner replacing both buttons)
  5. Verify the "Back" button is greyed out and non-clickable while processing
  6. Complete a full refund flow (select items → review → confirm → success) and verify everything works

Images/gif

Screenshot_20260313_182315 Screenshot_20260313_182331
Screen_recording_20260313_182232.mp4
  • I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Replace the separate SelectItemsShimmerContent with a unified
SelectItemsContent that accepts WooPosRefundState and shows shimmer
rows (header + items) when loading, eliminating layout duplication.
@dangermattic
Copy link
Collaborator

dangermattic commented Mar 13, 2026

2 Warnings
⚠️ This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️ This PR is assigned to the milestone 24.4. This milestone is due in less than 2 days.
Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Mar 13, 2026

App Icon📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

App NameWooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Build Number734
Version24.3-rc-3
Application IDcom.woocommerce.android.prealpha
Commitd84822f
Installation URL41laujmo6kds0
Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

@samiuelson samiuelson added this to the 24.4 milestone Mar 13, 2026
@samiuelson samiuelson marked this pull request as ready for review March 13, 2026 17:28
@samiuelson samiuelson requested a review from kidinov March 13, 2026 17:28
@codecov-commenter
Copy link

codecov-commenter commented Mar 13, 2026

Codecov Report

❌ Patch coverage is 0% with 162 lines in your changes missing coverage. Please review.
✅ Project coverage is 39.58%. Comparing base (d0f562e) to head (d84822f).
⚠️ Report is 8 commits behind head on trunk.

Files with missing lines Patch % Lines
...s/orders/details/refund/WooPosIssueRefundDialog.kt 0.00% 162 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##              trunk   #15538      +/-   ##
============================================
- Coverage     39.60%   39.58%   -0.02%     
  Complexity    11267    11267              
============================================
  Files          2253     2253              
  Lines        130170   130233      +63     
  Branches      18241    18252      +11     
============================================
  Hits          51552    51552              
- Misses        73349    73412      +63     
  Partials       5269     5269              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copy link
Contributor

@kidinov kidinov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

I would just make:

  • Check box make slightly smaller
  • And the name of a product maybe a bit longer
  • We need to have a separator in between of the items to mimic the items in refund list

EDIT: Done in 742c7eb ☝️

@samiuelson samiuelson enabled auto-merge March 18, 2026 09:12
@samiuelson samiuelson merged commit c9762fe into trunk Mar 18, 2026
16 checks passed
@samiuelson samiuelson deleted the woomob-1861-woo-pos-add-animations branch March 18, 2026 09:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants