Introduce an EmptyState, so that screenshot filename stays consistent.

This commit is contained in:
Benoit Marty
2026-09-15 10:52:45 +02:00
parent 25505d6e8a
commit c512e3f299
10 changed files with 34 additions and 17 deletions
@@ -96,6 +96,7 @@ import io.element.android.libraries.matrix.api.verification.SessionVerificationS
import io.element.android.libraries.matrix.api.verification.VerificationRequest import io.element.android.libraries.matrix.api.verification.VerificationRequest
import io.element.android.libraries.preferences.api.store.AppPreferencesStore import io.element.android.libraries.preferences.api.store.AppPreferencesStore
import io.element.android.libraries.push.api.notifications.conversations.NotificationConversationService import io.element.android.libraries.push.api.notifications.conversations.NotificationConversationService
import io.element.android.libraries.ui.common.nodes.EmptyState
import io.element.android.libraries.ui.common.nodes.emptyNode import io.element.android.libraries.ui.common.nodes.emptyNode
import io.element.android.services.analytics.api.AnalyticsLongRunningTransaction import io.element.android.services.analytics.api.AnalyticsLongRunningTransaction
import io.element.android.services.analytics.api.AnalyticsService import io.element.android.services.analytics.api.AnalyticsService
@@ -327,7 +328,7 @@ class LoggedInFlowNode(
return when (navTarget) { return when (navTarget) {
// Rendered while the FtueState is Unknown. Render a loading state rather than nothing at all, // Rendered while the FtueState is Unknown. Render a loading state rather than nothing at all,
// since there is no guarantee that this state will be left. // since there is no guarantee that this state will be left.
NavTarget.Placeholder -> emptyNode(buildContext, delayBeforeShowingContent = 500.milliseconds) NavTarget.Placeholder -> emptyNode(buildContext, state = EmptyState(delayBeforeShowingContent = 500.milliseconds))
NavTarget.LoggedInPermanent -> { NavTarget.LoggedInPermanent -> {
val callback = object : LoggedInNode.Callback { val callback = object : LoggedInNode.Callback {
override fun navigateToNotificationTroubleshoot() { override fun navigateToNotificationTroubleshoot() {
@@ -32,6 +32,7 @@ import io.element.android.libraries.architecture.BackstackView
import io.element.android.libraries.architecture.BaseFlowNode import io.element.android.libraries.architecture.BaseFlowNode
import io.element.android.libraries.architecture.createNode import io.element.android.libraries.architecture.createNode
import io.element.android.libraries.di.SessionScope import io.element.android.libraries.di.SessionScope
import io.element.android.libraries.ui.common.nodes.EmptyState
import io.element.android.libraries.ui.common.nodes.emptyNode import io.element.android.libraries.ui.common.nodes.emptyNode
import kotlinx.coroutines.flow.filterIsInstance import kotlinx.coroutines.flow.filterIsInstance
import kotlinx.coroutines.flow.launchIn import kotlinx.coroutines.flow.launchIn
@@ -88,7 +89,7 @@ class FtueFlowNode(
// Rendered while waiting for the initial state (see FtueStep.WaitingForInitialState). // Rendered while waiting for the initial state (see FtueStep.WaitingForInitialState).
// This can last for a while, or forever if the sync service never manages to run, so // This can last for a while, or forever if the sync service never manages to run, so
// render a loading state rather than nothing at all. // render a loading state rather than nothing at all.
emptyNode(buildContext, delayBeforeShowingContent = 500.milliseconds) emptyNode(buildContext, EmptyState(delayBeforeShowingContent = 500.milliseconds))
} }
is NavTarget.SessionVerification -> { is NavTarget.SessionVerification -> {
val callback = object : FtueSessionVerificationFlowNode.Callback { val callback = object : FtueSessionVerificationFlowNode.Callback {
@@ -17,16 +17,14 @@ import kotlin.time.Duration
* Ref: https://www.figma.com/design/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=1518-85323 * Ref: https://www.figma.com/design/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=1518-85323
* *
* @param buildContext the [BuildContext] of the Node. * @param buildContext the [BuildContext] of the Node.
* @param delayBeforeShowingContent when finite, a loading indicator fades in after this delay. Use it for * @param state the [EmptyState] of the Node. Default value will render an empty node forever.
* placeholders which can stay on screen for a long time, or forever, else the application looks frozen.
* Defaults to [Duration.INFINITE], i.e. the Node stays empty.
*/ */
fun emptyNode( fun emptyNode(
buildContext: BuildContext, buildContext: BuildContext,
delayBeforeShowingContent: Duration = Duration.INFINITE, state: EmptyState = EmptyState(Duration.INFINITE),
): Node = node(buildContext) { modifier -> ): Node = node(buildContext) { modifier ->
EmptyView( EmptyView(
delayBeforeShowingContent = delayBeforeShowingContent, state = state,
modifier = modifier, modifier = modifier,
) )
} }
@@ -0,0 +1,18 @@
/*
* Copyright (c) 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
* Please see LICENSE files in the repository root for full details.
*/
package io.element.android.libraries.ui.common.nodes
import kotlin.time.Duration
/**
* @property delayBeforeShowingContent when finite, a loading indicator fades in after this delay. Use it for
* placeholders which can stay on screen for a long time, or forever, else the application looks frozen.
*/
data class EmptyState(
val delayBeforeShowingContent: Duration,
)
@@ -11,10 +11,10 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import kotlin.time.Duration import kotlin.time.Duration
import kotlin.time.Duration.Companion.seconds import kotlin.time.Duration.Companion.seconds
open class DurationPreviewParam : PreviewParameterProvider<Duration> { open class EmptyStatePreviewParam : PreviewParameterProvider<EmptyState> {
override val values: Sequence<Duration> override val values: Sequence<EmptyState>
get() = sequenceOf( get() = sequenceOf(
Duration.INFINITE, EmptyState(Duration.INFINITE),
1.seconds, EmptyState(1.seconds),
) )
} }
@@ -26,11 +26,10 @@ import io.element.android.libraries.designsystem.theme.components.CircularProgre
import io.element.android.libraries.designsystem.theme.components.Text import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.designsystem.utils.DelayedVisibility import io.element.android.libraries.designsystem.utils.DelayedVisibility
import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.libraries.ui.strings.CommonStrings
import kotlin.time.Duration
@Composable @Composable
fun EmptyView( fun EmptyView(
delayBeforeShowingContent: Duration, state: EmptyState,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) = Box( ) = Box(
modifier = modifier modifier = modifier
@@ -38,8 +37,8 @@ fun EmptyView(
.background(ElementTheme.colors.bgCanvasDefault), .background(ElementTheme.colors.bgCanvasDefault),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
if (delayBeforeShowingContent.isFinite()) { if (state.delayBeforeShowingContent.isFinite()) {
DelayedVisibility(duration = delayBeforeShowingContent) { DelayedVisibility(duration = state.delayBeforeShowingContent) {
LoadingContent() LoadingContent()
} }
} }
@@ -62,7 +61,7 @@ private fun LoadingContent() = Column(
@PreviewsDayNight @PreviewsDayNight
@Composable @Composable
internal fun EmptyViewPreview( internal fun EmptyViewPreview(
@PreviewParameter(DurationPreviewParam::class) duration: Duration @PreviewParameter(EmptyStatePreviewParam::class) state: EmptyState
) = ElementPreview { ) = ElementPreview {
EmptyView(delayBeforeShowingContent = duration) EmptyView(state = state)
} }