Closed lanitochka17 closed 1 week ago
Triggered auto assignment to @kadiealexander (Bug
), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.
ActivityIndicator
does not include a circular background like the web version.
You can see an example of this behavior in the React Native docs.
NA
NA
Job added to Upwork: https://www.upwork.com/jobs/~021887242265582398778
Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External
)
iOS <> Android bug swap with @jliexpensify
Can reproduce, search circle is barely there for me (Pixel 7)
the search circle is not fully visible
mWeb uses consistent browser-based CSS animations, while Android Native relies on ActivityIndicator, which is platform-dependent and affected by device settings. This causes rendering inconsistencies like partial visibility on Android.
To resolve this issue, we should replace ActivityIndicator with Lottie for loading. To implement this, we need the following steps:
1 Need design json loading for Lottie 2 Create new component loading Lottie 3 Replace here and here
None
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.
Here for search, we are using React Native's default ActivityIndicator
, which differs between iOS and Android—it displays the respective OS's circular loading indicator.
If we want to change this and use a unified custom loader, I think we should confirm with the design team first.
@Expensify/design, what do you think about this issue? Should we update the search loader to ensure consistency across platforms, or does the current loader look fine?
I’m attaching videos for Android, iOS, and mWeb below for comparison. Please let us know your thoughts!
Here for search, we are using React Native's default ActivityIndicator, which differs between iOS and Android—it displays the respective OS's circular loading indicator.
As far as I know, we use this same loader for all our spinners across the app. I feel like this has come up a few times in the past and we've always decided to just continue using the default ActivityIndicator. I don't feel strongly about changing that decision now. @Expensify/design how about you all?
Yeah I think it's fine to just keep using what we currently have as well, and then later on we can follow up and implement a custom loading spinner everywhere.
Yeah I agree with both of you 👍
Cool, ty @Expensify/design team - so close this one out then?
I would say so, yeah.
Thanks, job closed!
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 9.0.94-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team
Action Performed:
Expected Result:
In mweb and android, spinning circle must be fully visible
Actual Result:
In mweb, spinning circle is fully visible but in android , circle is not fully visible
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
https://github.com/user-attachments/assets/ca8547b2-5b88-4e9b-8416-87242110480d
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @jayeshmangwani