cilly/Banksia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): use expressive loading indicator

Browse source
This commit is contained in:
Cilly Leang 2026-02-27 23:20:21 +11:00
parent a3dacda912
commit b3f68d9e15
Signed by: cilly
GPG key ID: 6500251E087653C9
2 changed files with 40 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
composeApp/src/commonMain/kotlin/moe/lava/banksia/ui/layout/InfoPanel.kt
View file

@ -1,5 +1,10 @@
package moe.lava.banksia.ui.layout
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
@ -11,10 +16,16 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContent
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.windowInsetsBottomHeight
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.LoadingIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@ -26,10 +37,13 @@ import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.coerceAtMost
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import moe.lava.banksia.ui.components.RouteIcon
import moe.lava.banksia.ui.screens.map.MapScreenEvent
import moe.lava.banksia.ui.state.InfoPanelState
import kotlin.time.Duration.Companion.milliseconds
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun InfoPanel(
state: InfoPanelState,
@ -40,6 +54,16 @@ fun InfoPanel(
return
val localDensity = LocalDensity.current
var delayedLoad by remember { mutableStateOf(false) }
LaunchedEffect(state.loading) {
if (state.loading) {
delay(200.milliseconds)
delayedLoad = true
} else {
delayedLoad = false
}
}
Column(
Modifier
@ -57,11 +81,18 @@ fun InfoPanel(
is InfoPanelState.None -> throw UnsupportedOperationException()
}
if (state.loading)
CircularProgressIndicator(
modifier = Modifier.size(32.dp).align(Alignment.TopEnd)
this@Column.AnimatedVisibility(
modifier = Modifier.align(Alignment.TopEnd),
visible = delayedLoad,
label = "sheet-loading",
enter = fadeIn() + scaleIn(),
exit = fadeOut() + scaleOut(),
) {
LoadingIndicator(
modifier = Modifier.size(48.dp)
)
}
}
Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.safeContent))
}
}

8
composeApp/src/commonMain/kotlin/moe/lava/banksia/ui/platform/BanksiaTheme.kt
View file

@ -2,18 +2,20 @@ package moe.lava.banksia.ui.platform
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.ColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.MaterialExpressiveTheme
import androidx.compose.runtime.Composable
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun BanksiaTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = true,
content: @Composable (() -> Unit)
) {
MaterialTheme(
MaterialExpressiveTheme(
colorScheme = BanksiaTheme.colors(darkTheme, dynamicColor),
content = content
content = content,
)
}