diff --git a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodePresenter.kt b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodePresenter.kt index 3deff8c603..6a7e7cfcf5 100644 --- a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodePresenter.kt +++ b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodePresenter.kt @@ -22,6 +22,9 @@ import io.element.android.libraries.architecture.Presenter import io.element.android.libraries.core.log.logger.LoggerTag import io.element.android.libraries.matrix.api.linknewdevice.LinkMobileStep import io.element.android.libraries.matrix.api.logs.LoggerTags +import kotlinx.coroutines.Job +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch import timber.log.Timber private val tag = LoggerTag("ShowQrCodePresenter", LoggerTags.linkNewDevice) @@ -36,20 +39,54 @@ class ShowQrCodePresenter( fun create(initialData: String): ShowQrCodePresenter } + private var loadingJob: Job? = null + @Composable override fun present(): ShowQrCodeState { var qrCodeRotationCounter by remember { mutableIntStateOf(MAX_QR_CODE_ROTATION) } - val data by produceState>(AsyncData.Success(initialData)) { + val state by produceState( + initialValue = ShowQrCodeState( + data1 = AsyncData.Success(initialData), + data2 = AsyncData.Uninitialized, + dataToRender = 1, + ) + ) { linkNewMobileHandler.stepFlow.collect { step -> + val currentValue = value when (step) { is LinkMobileStep.QrReady -> { - value = AsyncData.Success(step.data) + loadingJob?.cancel() + if (currentValue.dataToRender == 1) { + value = currentValue.copy( + data2 = AsyncData.Success(step.data), + dataToRender = 2, + ) + } else { + value = currentValue.copy( + data1 = AsyncData.Success(step.data), + dataToRender = 1, + ) + } } is LinkMobileStep.QrRotating -> { if (qrCodeRotationCounter-- > 0) { Timber.tag(tag.value).d("Rotating QrCode") linkNewMobileHandler.rotateQrCode() - value = AsyncData.Loading() + // Ensure that outdated data is not rendered too long while rotating QR code + loadingJob = launch { + delay(1000) + if (currentValue.dataToRender == 1) { + value = currentValue.copy( + data2 = AsyncData.Loading(), + dataToRender = 2, + ) + } else { + value = currentValue.copy( + data1 = AsyncData.Loading(), + dataToRender = 1, + ) + } + } } else { Timber.tag(tag.value).w("Max QR code rotation reached, not rotating anymore") linkNewMobileHandler.onTooManyRotation() @@ -60,9 +97,7 @@ class ShowQrCodePresenter( } } - return ShowQrCodeState( - data = data, - ) + return state } companion object { diff --git a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeState.kt b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeState.kt index e69dde8264..76302b71aa 100644 --- a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeState.kt +++ b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeState.kt @@ -10,5 +10,7 @@ package io.element.android.features.linknewdevice.impl.screens.qrcode import io.element.android.libraries.architecture.AsyncData data class ShowQrCodeState( - val data: AsyncData, + val data1: AsyncData, + val data2: AsyncData, + val dataToRender: Int, ) diff --git a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeStateProvider.kt b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeStateProvider.kt index 0c987bc5e7..dc7c12b847 100644 --- a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeStateProvider.kt +++ b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeStateProvider.kt @@ -14,14 +14,23 @@ class ShowQrCodeStateProvider : PreviewParameterProvider { override val values: Sequence get() = sequenceOf( aShowQrCodeState(), - ShowQrCodeState( - data = AsyncData.Loading(), + aShowQrCodeState( + data1 = AsyncData.Loading(), + ), + aShowQrCodeState( + data1 = AsyncData.Success("DATA"), + data2 = AsyncData.Success("DATA2"), + dataToRender = 2, ), ) } private fun aShowQrCodeState( - data: AsyncData.Success = AsyncData.Success("DATA"), + data1: AsyncData = AsyncData.Success("DATA"), + data2: AsyncData = AsyncData.Uninitialized, + dataToRender: Int = 1, ) = ShowQrCodeState( - data = data, + data1 = data1, + data2 = data2, + dataToRender = dataToRender, ) diff --git a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeView.kt b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeView.kt index cc55ed374d..0791847288 100644 --- a/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeView.kt +++ b/features/linknewdevice/impl/src/main/kotlin/io/element/android/features/linknewdevice/impl/screens/qrcode/ShowQrCodeView.kt @@ -9,6 +9,9 @@ package io.element.android.features.linknewdevice.impl.screens.qrcode +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer @@ -58,23 +61,15 @@ fun ShowQrCodeView( Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, ) { - when (val str = state.data.dataOrNull()) { - null -> { - Box( - modifier = Modifier - .size(220.dp), - contentAlignment = Alignment.Center, - ) { - CircularProgressIndicator() - } - } - else -> { - QrCodeImage( - data = str, - modifier = Modifier - .size(220.dp) - ) - } + Box { + QrCodeOrLoading( + isVisible = state.dataToRender == 1, + data = state.data1.dataOrNull(), + ) + QrCodeOrLoading( + isVisible = state.dataToRender == 2, + data = state.data2.dataOrNull(), + ) } Spacer(modifier = Modifier.height(32.dp)) NumberedListOrganism( @@ -95,6 +90,36 @@ fun ShowQrCodeView( } } +@Composable +private fun QrCodeOrLoading( + isVisible: Boolean, + data: String?, + modifier: Modifier = Modifier, +) { + AnimatedVisibility( + modifier = modifier, + visible = isVisible, + enter = fadeIn(), + exit = fadeOut(), + ) { + if (data == null) { + Box( + modifier = Modifier + .size(220.dp), + contentAlignment = Alignment.Center, + ) { + CircularProgressIndicator() + } + } else { + QrCodeImage( + data = data, + modifier = Modifier + .size(220.dp) + ) + } + } +} + @PreviewsDayNight @Composable internal fun ShowQrCodeViewPreview(