chore/8936-UseDesignSystemLoadingComponent

[oddballdave]

Description of Change

Incorporated the Design System LoadingIndicator component into the app. This is a partial replacement for the existing app-supplied LoadingComponent which handled these scenarios:

1. Showing a spinner only with a custom color.
2. Showing an inline spinner with a customized color and size.
3. Showing a spinner with text below it.

This work only covers scenario 3 because the Design System LoadingIndicator does not provide a way to customize it for the other two cases. Furthermore, to center the LoadingIndicator vertically on the screen it had to be wrapped by the existing app-supplied LoadingComponent.

After implementing these changes, all detox/e2e screen tests that showed the loading component started to fail. Research and experimentation showed that the animation logic in the component was flawed, so this was adjusted to a cleaner/safer implementation so the tests would function normally.

Screenshots/Video

Android (Before)
iOS (Before)
Android (After)
iOS (After)

Testing

• Tested on iOS
• Tested on Android

Reviewer Validations

PR Checklist

Reviewer: Confirm the items below as you review

• PR is connected to issue(s)
• Tests are included to cover this change (when possible)
• No magic strings (All string unions follow the Union -> Constant type pattern)
• No secrets or API keys are checked in
• All imports are absolute (no relative imports)
• New functions and Redux work have proper TSDoc annotations

For QA

Run a build for this branch