Skip to content

M3 expressive wavy progress indicators#380

Open
dfabulich wants to merge 2 commits intoskiptools:mainfrom
dfabulich:material-3-expressive-wavy-progress
Open

M3 expressive wavy progress indicators#380
dfabulich wants to merge 2 commits intoskiptools:mainfrom
dfabulich:material-3-expressive-wavy-progress

Conversation

@dfabulich
Copy link
Copy Markdown
Contributor

@dfabulich dfabulich commented Apr 2, 2026

Fixes #379

This PR upgrades us to androidx-material3 1.5.0-alpha16, so we can access the new M3 Expressive stuff.

I've added a new .material3WavyProgress() modifier. You can pass it no arguments, and it will do the right thing, or you can configure the amplitude, wavelength, and "wave speed"

Skip Pull Request Checklist:

  • REQUIRED: I have signed the Contributor Agreement
  • REQUIRED: I have tested my change locally with swift test
  • OPTIONAL: I have tested my change on an iOS simulator or device
  • OPTIONAL: I have tested my change on an Android emulator or device
  • REQUIRED: I have checked whether this change requires a corresponding update in the Skip Fuse UI repository (link related PR if applicable)
    No skip-fuse-ui changes required.
  • OPTIONAL: I have added an example of any UI changes in the Showcase sample app
    M3 expressive wavy progress indicators skipapp-showcase#85

  • AI was used to generate or assist with generating this PR. Please specify below how you used AI to help you, and what steps you have taken to manually verify the changes.

Cursor generated a first draft, which I manually cleaned up and documented. I manually tested the new progress indicators in the ProgressViewPlayground in both the Lite and Fuse showcases.

Before / After
Screenshot_20260401_193702 Screenshot_20260401_200113

Screen_recording_20260401_200124.webm

@marcprux
Copy link
Copy Markdown
Member

The implementation looks solid, but unless you have an urgent need for it, I'd like to hold off on this at least until androidx-material3 comes out of alpha (which hopefully will be soon, singe they're on 1.5.0-alpha16 now).

Another issue I'd like to consider for this sort of thing is whether it might be better to extend the progressViewStyle() values rather than having an Android-specific method for this, which might align somewhat better with SwiftUI patterns. So like:

ProgressView()
    #if os(iOS)
    .progressViewStyle(.linear)
    #elseif os(Android)
    .progressViewStyle(.material3Wavy(gapSize: 2.0, amplitude: 1.0))
    #endif

@dfabulich
Copy link
Copy Markdown
Contributor Author

I went with a separate modifier for two reasons.

First, because wavy is a mode on top of a style; you can choose either linear-wavy or circular-wavy.

ProgressView()
    .progressViewStyle(.linear)
    #if os(Android)
    .material3WavyProgress()
    #endif
    
ProgressView()
    .progressViewStyle(.circular)
    #if os(Android)
    .material3WavyProgress()
    #endif

Second, it means that I could set .material3WavyProgress() at the top level of my app, and it turned all of my progress indicators wavy.

If we did it with separate .progressViewStyles:

ProgressView()
    #if os(Android)
    .progressViewStyle(.material3WavyLinear)
    #else
    .progressViewStyle(.linear)
    #endif
    
ProgressView()
    #if os(Android)
    .progressViewStyle(.material3WavyCircular)
    #else
    .progressViewStyle(.circular)
    #endif

… and I'd have to wire that up everywhere in my entire app.

I think .progressViewStyle might be appropriate for the new animated "morphing" indicator, LoadingIndicator

LoadingIndicator is round-ish, so it's more like a circular indeterminate progress indicator, but it's intended for "permanently indeterminate" loading indicators.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

M3 expressive wavy progress indicators

2 participants