ALFMOB-437: Modern Design Rollout — Startup / Splash screen#96
Open
khoinguyen-mindera wants to merge 15 commits into
Open
ALFMOB-437: Modern Design Rollout — Startup / Splash screen#96khoinguyen-mindera wants to merge 15 commits into
khoinguyen-mindera wants to merge 15 commits into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Updates Alfie’s startup/splash experience to match the “modern design” spec by introducing a dedicated in-app SplashView (wordmark + static spinner) and aligning the native LaunchScreen.storyboard logo sizing/asset handling for launch→in-app visual consistency.
Changes:
- Added a new
SplashViewinAppFeatureand wired it into the.loadingstartup screen (replacing the animatedThemedLoaderView). - Introduced SharedUI building blocks:
ThemedImage.splashLogo(new wordmark asset) andThemedSpinnerView(static, non-animated indicator). - Updated launch screen assets/layout and added a small unit test + accessibility identifier plumbing.
Reviewed changes
Copilot reviewed 13 out of 15 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| Docs/Plans/ALFMOB-437-splash-redesign/scope.md | Captures current-state analysis and target layout requirements. |
| Docs/Plans/ALFMOB-437-splash-redesign/plan.md | Documents the phased implementation plan and decisions. |
| Docs/Plans/ALFMOB-437-splash-redesign/grill.md | Records final design/implementation decisions. |
| Docs/Plans/ALFMOB-437-splash-redesign/_status.md | Tracks execution status and verification notes. |
| Alfie/AlfieKit/Tests/AppFeatureTests/SplashViewTests.swift | Adds unit coverage for the new splash view/identifier. |
| Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImages.xcassets/splash-wordmark.imageset/splash-wordmark.svg | Adds the new MINDERA/ALFIE wordmark vector asset for SharedUI. |
| Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImages.xcassets/splash-wordmark.imageset/Contents.json | Ensures vector preservation for the new SharedUI wordmark asset. |
| Alfie/AlfieKit/Sources/SharedUI/Theme/Images/ThemedImage.swift | Exposes the new wordmark via ThemedImage.splashLogo. |
| Alfie/AlfieKit/Sources/SharedUI/Theme/Components/Loader/ThemedSpinnerView.swift | Adds a static (non-animated) spinner component in SharedUI. |
| Alfie/AlfieKit/Sources/AppFeature/UI/SplashView.swift | Implements the in-app splash layout and accessibility identifier. |
| Alfie/AlfieKit/Sources/AppFeature/Navigation/AppFeatureView.swift | Switches the .loading startup screen to the new SplashView. |
| Alfie/AlfieKit/Sources/AccessibilityIdentifiers/AccessibilityID.swift | Adds AccessibilityID.Splash.screen. |
| Alfie/AlfieKit/Package.swift | Wires AccessibilityIdentifiers into AppFeature + AppFeatureTests. |
| Alfie/Alfie/LaunchScreen.storyboard | Resizes the launch logo image view/resource metadata to match the new lockup aspect. |
| Alfie/Alfie/Assets.xcassets/LaunchLogo.imageset/LaunchLogo.svg | Updates the app launch logo artwork to the new lockup vector. |
Comment on lines
+5
to
+26
| public struct ThemedSpinnerView: View { | ||
| private enum Constants { | ||
| static let trimEnd: CGFloat = 0.75 | ||
| static let lineWidth: CGFloat = 2 | ||
| } | ||
|
|
||
| private let size: CGFloat | ||
|
|
||
| public init(size: CGFloat = Sizing.iconsIconMedium) { | ||
| self.size = size | ||
| } | ||
|
|
||
| public var body: some View { | ||
| Circle() | ||
| .trim(from: 0, to: Constants.trimEnd) | ||
| .stroke( | ||
| theme.color.neutrals400, | ||
| style: StrokeStyle(lineWidth: Constants.lineWidth, lineCap: .round) | ||
| ) | ||
| .rotationEffect(.degrees(-90)) | ||
| .frame(width: size, height: size) | ||
| } |
Comment on lines
+21
to
+23
| .frame(maxWidth: .infinity, maxHeight: .infinity) | ||
| .background(theme.color.neutrals0) | ||
| .accessibilityIdentifier(AccessibilityID.Splash.screen) |
Comment on lines
+1
to
+13
| import AccessibilityIdentifiers | ||
| import XCTest | ||
| @testable import AppFeature | ||
|
|
||
| final class SplashViewTests: XCTestCase { | ||
| func test_splashView_isInstantiable() { | ||
| _ = SplashView() | ||
| } | ||
|
|
||
| func test_splashAccessibilityIdentifier_isStable() { | ||
| XCTAssertEqual(AccessibilityID.Splash.screen, "splash.screen") | ||
| } | ||
| } |
…-based SplashView test
…tological assertion
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ALFMOB-437 — Modern Design Rollout: Startup / Splash screen
Restyles the app startup screen to the modern Figma design, adds the design-system Loading Spinner component, and (for launch→in-app consistency) updates the native launch screen. Visual-only; no behaviour, timing, or boot-sequence change. No feature flag (app unreleased). Dark mode deferred.
Jira: https://mindera.atlassian.net/browse/ALFMOB-437
Figma: Loading screen (iOS) · Loading Spinner (DS)
What changed
AppFeature): newSplashView— the MINDERA/ALFIE wordmark centred (vertically aligned with the launch screen, no jump on hand-off) with the loading spinner hanging below it via.overlay. Replaces the animated GIFThemedLoaderViewfor the.loadingstate; background bleeds full-screen.ThemedSpinnerView, SharedUI): the Figma spinner artwork (ThemedImage.loadingSpinner, an angular "comet" arc PNG) rotated continuously, sizes S/M/L (24/32/48) via aSizeconfig. Splash uses.small. (Rendered from the exported image because the design's conic gradient can't be carried into Xcode by SVG.)ThemedImage.splashLogo, shared by both screens.LaunchScreen.storyboard): new MINDERA/ALFIELaunchLogo, resized to the lockup aspect (160×49),preserves-vector-representationrestored.AccessibilityID.Splash.screen;AccessibilityIdentifierswired into theAppFeaturetarget.Acceptance criteria
AppStartupServiceTestsunchanged and green.Notes on scope
ThemedSpinnerViewseam to be deterministic).Testing
./Alfie/scripts/verify.sh --skip-integration→ ✅ build + unit tests passing.Plan / decisions:
Docs/Plans/ALFMOB-437-splash-redesign/