Skip to content

Commit 18f25b5

Browse files
bmc08gtbmc08gt
committed
style(nav): crossfade from loading screen and fade in login
Replace slide transition with crossfade when navigating from the Loading/splash route to login or scanner. Delay the splash logo by 1s and fade in the login screen content for a smoother launch. Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent cb0f318 commit 18f25b5

3 files changed

Lines changed: 52 additions & 24 deletions

File tree

  • apps/flipcash

‎apps/flipcash/app/src/main/kotlin/com/flipcash/app/internal/ui/App.kt‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ package com.flipcash.app.internal.ui
22

33
import androidx.compose.animation.EnterTransition
44
import androidx.compose.animation.ExitTransition
5+
import androidx.compose.animation.core.tween
6+
import androidx.compose.animation.fadeIn
7+
import androidx.compose.animation.fadeOut
58
import androidx.compose.animation.slideInHorizontally
69
import androidx.compose.animation.slideOutHorizontally
710
import androidx.compose.animation.togetherWith
@@ -164,26 +167,35 @@ internal fun App(
164167
)
165168
} then SinglePaneSceneStrategy(),
166169
transitionSpec = {
167-
if (targetState is OverlayScene<*> || initialState is OverlayScene<*>) {
168-
EnterTransition.None togetherWith ExitTransition.None
169-
} else {
170-
slideInHorizontally(initialOffsetX = { it }) togetherWith
170+
val hasLoading = initialState.key == AppRoute.Loading.toString() ||
171+
targetState.key == AppRoute.Loading.toString()
172+
when {
173+
hasLoading -> fadeIn(tween(300)) togetherWith fadeOut(tween(300))
174+
targetState is OverlayScene<*> || initialState is OverlayScene<*> ->
175+
EnterTransition.None togetherWith ExitTransition.None
176+
else -> slideInHorizontally(initialOffsetX = { it }) togetherWith
171177
slideOutHorizontally(targetOffsetX = { -it })
172178
}
173179
},
174180
popTransitionSpec = {
175-
if (targetState is OverlayScene<*> || initialState is OverlayScene<*>) {
176-
EnterTransition.None togetherWith ExitTransition.None
177-
} else {
178-
slideInHorizontally(initialOffsetX = { -it }) togetherWith
181+
val hasLoading = initialState.key == AppRoute.Loading.toString() ||
182+
targetState.key == AppRoute.Loading.toString()
183+
when {
184+
hasLoading -> fadeIn(tween(300)) togetherWith fadeOut(tween(300))
185+
targetState is OverlayScene<*> || initialState is OverlayScene<*> ->
186+
EnterTransition.None togetherWith ExitTransition.None
187+
else -> slideInHorizontally(initialOffsetX = { -it }) togetherWith
179188
slideOutHorizontally(targetOffsetX = { it })
180189
}
181190
},
182191
predictivePopTransitionSpec = {
183-
if (targetState is OverlayScene<*> || initialState is OverlayScene<*>) {
184-
EnterTransition.None togetherWith ExitTransition.None
185-
} else {
186-
slideInHorizontally(initialOffsetX = { -it }) togetherWith
192+
val hasLoading = initialState.key == AppRoute.Loading.toString() ||
193+
targetState.key == AppRoute.Loading.toString()
194+
when {
195+
hasLoading -> fadeIn(tween(300)) togetherWith fadeOut(tween(300))
196+
targetState is OverlayScene<*> || initialState is OverlayScene<*> ->
197+
EnterTransition.None togetherWith ExitTransition.None
198+
else -> slideInHorizontally(initialOffsetX = { -it }) togetherWith
187199
slideOutHorizontally(targetOffsetX = { it })
188200
}
189201
},

‎apps/flipcash/app/src/main/kotlin/com/flipcash/app/internal/ui/navigation/MainRoot.kt‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,11 @@ internal fun MainRoot(deepLink: () -> DeepLink?) {
8686
}
8787

8888

89+
LaunchedEffect(Unit) {
90+
delay(1.seconds)
91+
showLogo = true
92+
}
93+
8994
LaunchedEffect(userManager) {
9095
userManager.state
9196
.map { it.authState to it.flags }
@@ -109,16 +114,13 @@ internal fun MainRoot(deepLink: () -> DeepLink?) {
109114
AuthState.LoggedInAwaitingUser -> {
110115
delay(1.5.seconds)
111116
showLoading = true
112-
showLogo = true
113117
}
114118

115119
AuthState.LoggedInWithUser -> {
116120
showLogo = false
117121
}
118122

119-
else -> {
120-
showLogo = true
121-
}
123+
else -> Unit
122124
}
123125

124126
if (launch != null) {

‎apps/flipcash/features/login/src/main/kotlin/com/flipcash/app/login/router/LoginRouter.kt‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
package com.flipcash.app.login.router
22

3+
import androidx.compose.animation.AnimatedVisibility
4+
import androidx.compose.animation.core.tween
5+
import androidx.compose.animation.fadeIn
36
import androidx.compose.runtime.Composable
47
import androidx.compose.runtime.LaunchedEffect
58
import androidx.compose.runtime.collectAsState
69
import androidx.compose.runtime.getValue
10+
import androidx.compose.runtime.mutableStateOf
11+
import androidx.compose.runtime.remember
12+
import androidx.compose.runtime.setValue
713
import androidx.hilt.navigation.compose.hiltViewModel
814
import com.flipcash.app.core.AppRoute
915
import com.flipcash.app.core.extensions.navigateTo
@@ -22,6 +28,9 @@ fun LoginRouter(
2228
val vm = hiltViewModel<LoginViewModel>()
2329
val state by vm.stateFlow.collectAsState()
2430
val navigator = LocalCodeNavigator.current
31+
var visible by remember { mutableStateOf(false) }
32+
33+
LaunchedEffect(Unit) { visible = true }
2534

2635
LaunchedEffect(vm) {
2736
vm.eventFlow
@@ -59,12 +68,17 @@ fun LoginRouter(
5968
}
6069
}
6170

62-
LoginRouterScreenContent(
63-
isLoggingIn = state.loggingIn,
64-
createAccount = { vm.dispatchEvent(LoginViewModel.Event.CreateAccount) },
65-
login = { navigator.push(AppRoute.Onboarding.SeedInput) },
66-
isLabsOpen = state.betaOptionsVisible,
67-
onLogoTapped = { vm.dispatchEvent(LoginViewModel.Event.OnLogoTapped) },
68-
openBetaFlags = { navigator.navigateTo(AppRoute.Sheets.Lab) }
69-
)
71+
AnimatedVisibility(
72+
visible = visible,
73+
enter = fadeIn(tween(150)),
74+
) {
75+
LoginRouterScreenContent(
76+
isLoggingIn = state.loggingIn,
77+
createAccount = { vm.dispatchEvent(LoginViewModel.Event.CreateAccount) },
78+
login = { navigator.push(AppRoute.Onboarding.SeedInput) },
79+
isLabsOpen = state.betaOptionsVisible,
80+
onLogoTapped = { vm.dispatchEvent(LoginViewModel.Event.OnLogoTapped) },
81+
openBetaFlags = { navigator.navigateTo(AppRoute.Sheets.Lab) }
82+
)
83+
}
7084
}

0 commit comments

Comments
 (0)