Merge pull request #7692 from element-hq/bma/fix7689

Fix blank screen at launch when the homeserver expires the sliding sync session

libraries/ui-common/build.gradle.kts

@@ -18,4 +18,5 @@ dependencies {
     implementation(libs.appyx.core)
     implementation(projects.libraries.core)
     implementation(projects.libraries.designsystem)
+    implementation(projects.libraries.uiStrings)
 }

libraries/ui-common/src/main/kotlin/io/element/android/libraries/ui/common/nodes/EmptyNode.kt

@@ -8,38 +8,23 @@
 
 package io.element.android.libraries.ui.common.nodes
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.node.node
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import kotlin.time.Duration
 
 /**
  * Ref: https://www.figma.com/design/0MMNu7cTOzLOlWb7ctTkv3/Element-X?node-id=1518-85323
+ *
+ * @param buildContext the [BuildContext] of the Node.
+ * @param state the [EmptyState] of the Node. Default value will render an empty node forever.
  */
 fun emptyNode(
     buildContext: BuildContext,
+    state: EmptyState = EmptyState(Duration.INFINITE),
 ): Node = node(buildContext) { modifier ->
-    EmptyView(modifier)
-}
-
-@Composable
-private fun EmptyView(
-    modifier: Modifier = Modifier,
-) = Box(
-    modifier = modifier
-        .fillMaxSize()
-        .background(ElementTheme.colors.bgCanvasDefault),
-)
-
-@PreviewsDayNight
-@Composable
-internal fun EmptyViewPreview() = ElementPreview {
-    EmptyView(Modifier)
+    EmptyView(
+        state = state,
+        modifier = modifier,
+    )
 }

libraries/ui-common/src/main/kotlin/io/element/android/libraries/ui/common/nodes/EmptyState.kt

@@ -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,
+)

libraries/ui-common/src/main/kotlin/io/element/android/libraries/ui/common/nodes/EmptyStatePreviewParam.kt

@@ -0,0 +1,20 @@
+/*
+ * 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 androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import kotlin.time.Duration
+import kotlin.time.Duration.Companion.seconds
+
+open class EmptyStatePreviewParam : PreviewParameterProvider<EmptyState> {
+    override val values: Sequence<EmptyState>
+        get() = sequenceOf(
+            EmptyState(Duration.INFINITE),
+            EmptyState(1.seconds),
+        )
+}

libraries/ui-common/src/main/kotlin/io/element/android/libraries/ui/common/nodes/EmptyView.kt

@@ -0,0 +1,67 @@
+/*
+ * 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 androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.utils.DelayedVisibility
+import io.element.android.libraries.ui.strings.CommonStrings
+
+@Composable
+fun EmptyView(
+    state: EmptyState,
+    modifier: Modifier = Modifier,
+) = Box(
+    modifier = modifier
+        .fillMaxSize()
+        .background(ElementTheme.colors.bgCanvasDefault),
+    contentAlignment = Alignment.Center,
+) {
+    if (state.delayBeforeShowingContent.isFinite()) {
+        DelayedVisibility(duration = state.delayBeforeShowingContent) {
+            LoadingContent()
+        }
+    }
+}
+
+@Composable
+private fun LoadingContent() = Column(
+    modifier = Modifier.padding(16.dp),
+    horizontalAlignment = Alignment.CenterHorizontally,
+    verticalArrangement = Arrangement.spacedBy(16.dp),
+) {
+    CircularProgressIndicator()
+    Text(
+        text = stringResource(CommonStrings.common_loading),
+        color = ElementTheme.colors.textSecondary,
+        style = ElementTheme.typography.fontBodyMdRegular,
+    )
+}
+
+@PreviewsDayNight
+@Composable
+internal fun EmptyViewPreview(
+    @PreviewParameter(EmptyStatePreviewParam::class) state: EmptyState
+) = ElementPreview {
+    EmptyView(state = state)
+}