Fixed an issue where the user could see the previous image in full screen mode before the selected one was loaded (android and desktop).

examples/imageviewer/README.md

@@ -1 +1,4 @@
-An example of image gallery for remote server image viewing, based on Jetpack Compose UI library (desktop).
+An example of image gallery for remote server image viewing, based on Jetpack Compose UI library (desktop and android).
+
+To run desktop application execute in terminal: ./gradlew desktop:run
+To run android application you will need to open project in Intellij IDEA or Android Studio and run "android" configuration

examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/model/ContentState.kt

@@ -159,7 +159,6 @@ object ContentState {
     }
 
     // application content initialization
-    // @Composable
     fun initData() {
         if (isAppUIReady.value)
             return
@@ -228,9 +227,18 @@ object ContentState {
         return MainImageWrapper.isEmpty()
     }
 
+    fun fullscreen(picture: Picture) {
+        isAppUIReady.value = false
+        AppState.screenState(ScreenType.FullscreenImage)
+        setMainImage(picture)
+    }
+
     fun setMainImage(picture: Picture) {
-        if (MainImageWrapper.getId() == picture.id)
+        if (MainImageWrapper.getId() == picture.id) {
+            if (!isContentReady())
+                isAppUIReady.value = true
             return
+        }
 
         executor.execute {
             if (isInternetAvailable()) {
@@ -240,6 +248,7 @@ object ContentState {
 
                 handler.post {
                     wrapPictureIntoMainImage(fullSizePicture)
+                    isAppUIReady.value = true
                 }
             } else {
                 handler.post {

examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/AppUI.kt

@@ -37,11 +37,7 @@ fun BuildAppUI(content: ContentState) {
     ) {
         when (AppState.screenState()) {
             ScreenType.Main -> {
-                if (content.isContentReady()) {
                 setMainScreen(content)
-                } else {
-                    setLoadingScreen(content)
-                }
             }
             ScreenType.FullscreenImage -> {
                 setImageFullScreen(content)

examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/FullImageScreen.kt

@@ -29,22 +29,27 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageAsset
 import androidx.compose.ui.graphics.asImageAsset
+import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Stack
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.RowScope.gravity
+import androidx.compose.foundation.layout.RowScope.align
 import androidx.compose.material.Surface
 import androidx.compose.ui.unit.dp
 import example.imageviewer.core.FilterType
 import example.imageviewer.model.AppState
 import example.imageviewer.model.ContentState
 import example.imageviewer.model.ScreenType
+import example.imageviewer.style.DarkGray
+import example.imageviewer.style.DarkGreen
 import example.imageviewer.style.Foreground
 import example.imageviewer.style.MiniatureColor
 import example.imageviewer.style.Transparent
@@ -56,7 +61,6 @@ import example.imageviewer.style.icFilterPixelOff
 import example.imageviewer.style.icFilterBlurOn
 import example.imageviewer.style.icFilterBlurOff
 import example.imageviewer.style.icFilterUnknown
-import example.imageviewer.style.DarkGray
 import example.imageviewer.utils.displayHeight
 import example.imageviewer.utils.displayWidth
 import example.imageviewer.utils.getDisplayBounds
@@ -69,11 +73,30 @@ import kotlin.math.roundToInt
 fun setImageFullScreen(
     content: ContentState
 ) {
-
+    if (content.isContentReady()) {
         Column {
             setToolBar(content.getSelectedImageName(), content)
             setImage(content)
         }
+    } else {
+        setLoadingScreen()
+    }
+}
+
+@Composable
+private fun setLoadingScreen() {
+
+    Stack {
+        Surface(color = MiniatureColor, modifier = Modifier.preferredHeight(44.dp)) {}
+        Box(modifier = Modifier.align(Alignment.Center)) {
+            Surface(color = DarkGray, elevation = 4.dp, shape = CircleShape) {
+                CircularProgressIndicator(
+                    modifier = Modifier.preferredSize(50.dp).padding(3.dp, 3.dp, 4.dp, 4.dp),
+                    color = DarkGreen
+                )
+            }
+        }
+    }
 }
 
 @Composable
@@ -86,7 +109,7 @@ fun setToolBar(
         Row(modifier = Modifier.padding(end = 30.dp)) {
             Surface(
                 color = Transparent,
-                modifier = Modifier.padding(start = 20.dp).gravity(Alignment.CenterVertically),
+                modifier = Modifier.padding(start = 20.dp).align(Alignment.CenterVertically),
                 shape = CircleShape
             ) {
                 Clickable(
@@ -107,14 +130,14 @@ fun setToolBar(
                 color = Foreground,
                 maxLines = 1,
                 modifier = Modifier.padding(start = 30.dp).weight(1f)
-                    .gravity(Alignment.CenterVertically),
+                    .align(Alignment.CenterVertically),
                 style = MaterialTheme.typography.body1
             )
 
             Surface(
                 color = Color(255, 255, 255, 40),
                 modifier = Modifier.preferredSize(154.dp, 38.dp)
-                    .gravity(Alignment.CenterVertically),
+                    .align(Alignment.CenterVertically),
                 shape = CircleShape
             ) {
                 ScrollableRow {
@@ -133,11 +156,11 @@ fun setToolBar(
 fun FilterButton(
     content: ContentState,
     type: FilterType,
-    modifier: Modifier = Modifier.gravity(Alignment.CenterVertically).preferredSize(38.dp)
+    modifier: Modifier = Modifier.align(Alignment.CenterVertically).preferredSize(38.dp)
 ) {
     Surface(
         color = Transparent,
-        modifier = Modifier.gravity(Alignment.CenterVertically),
+        modifier = Modifier.align(Alignment.CenterVertically),
         shape = CircleShape
     ) {
         Clickable(

examples/imageviewer/common/src/androidMain/kotlin/example/imageviewer/view/MainScreen.kt

@@ -65,10 +65,14 @@ import example.imageviewer.R
 
 @Composable
 fun setMainScreen(content: ContentState) {
+    if (content.isContentReady()) {
         Column {
             setTopContent(content)
             setScrollableArea(content)
         }
+    } else {
+        setLoadingScreen(content)
+    }
 }
 
 @Composable
@@ -78,7 +82,7 @@ fun setLoadingScreen(content: ContentState) {
         Column {
             setTopContent(content)
         }
-        Box(modifier = Modifier.gravity(Alignment.Center)) {
+        Box(modifier = Modifier.align(Alignment.Center)) {
             Surface(color = DarkGray, elevation = 4.dp, shape = CircleShape) {
                 CircularProgressIndicator(
                     modifier = Modifier.preferredSize(50.dp).padding(4.dp),
@@ -88,7 +92,7 @@ fun setLoadingScreen(content: ContentState) {
         }
         Text(
             text = content.getString(R.string.loading),
-            modifier = Modifier.gravity(Alignment.Center).offset(0.dp, 70.dp),
+            modifier = Modifier.align(Alignment.Center).offset(0.dp, 70.dp),
             style = MaterialTheme.typography.body1,
             color = Foreground
         )
@@ -117,11 +121,11 @@ fun setTitleBar(text: String, content: ContentState) {
             Text(
                 text,
                 color = Foreground,
-                modifier = Modifier.weight(1f).gravity(Alignment.CenterVertically)
+                modifier = Modifier.weight(1f).align(Alignment.CenterVertically)
             )
             Surface(
                 color = Transparent,
-                modifier = Modifier.padding(end = 20.dp).gravity(Alignment.CenterVertically),
+                modifier = Modifier.padding(end = 20.dp).align(Alignment.CenterVertically),
                 shape = CircleShape
             ) {
                 Clickable(
@@ -185,8 +189,7 @@ fun setMiniatureUI(
         Row(modifier = Modifier.padding(end = 30.dp)) {
             Clickable(
                 onClick = {
-                    content.setMainImage(picture)
-                    AppState.screenState(ScreenType.FullscreenImage)
+                    content.fullscreen(picture)
                 }
             ) {
                 Image(
@@ -200,7 +203,7 @@ fun setMiniatureUI(
             Text(
                 text = picture.name,
                 color = Foreground,
-                modifier = Modifier.weight(1f).gravity(Alignment.CenterVertically).padding(start = 16.dp),
+                modifier = Modifier.weight(1f).align(Alignment.CenterVertically).padding(start = 16.dp),
                 style = MaterialTheme.typography.body1
             )
                 

examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/model/ContentState.kt

@@ -124,9 +124,7 @@ class ContentState(
     }
 
     // application content initialization
-    @Composable
     fun initData() {
-        println("app")
         if (isAppUIReady.value)
             return
 
@@ -193,12 +191,18 @@ class ContentState(
         return mainImageWrapper.isEmpty()
     }
 
-    fun setMainImage(picture: Picture) {
-        if (mainImageWrapper.getId() == picture.id)
-            return
-
+    fun fullscreen(picture: Picture) {
         isAppUIReady.value = false
         AppState.screenState(ScreenType.FullscreenImage)
+        setMainImage(picture)
+    }
+
+    fun setMainImage(picture: Picture) {
+        if (mainImageWrapper.getId() == picture.id) {
+            if (!isContentReady())
+                isAppUIReady.value = true
+            return
+        }
 
         executor.execute {
             if (isInternetAvailable()) {

examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt

@@ -30,11 +30,11 @@ import androidx.compose.ui.graphics.asImageAsset
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.MaterialTheme
+import androidx.compose.foundation.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.Stack
-import androidx.compose.foundation.Box
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.preferredHeight
@@ -47,6 +47,7 @@ import example.imageviewer.core.FilterType
 import example.imageviewer.model.AppState
 import example.imageviewer.model.ContentState
 import example.imageviewer.model.ScreenType
+import example.imageviewer.style.DarkGray
 import example.imageviewer.style.DarkGreen
 import example.imageviewer.style.Foreground
 import example.imageviewer.style.MiniatureColor
@@ -59,7 +60,6 @@ import example.imageviewer.style.icFilterPixelOff
 import example.imageviewer.style.icFilterBlurOn
 import example.imageviewer.style.icFilterBlurOff
 import example.imageviewer.style.icFilterUnknown
-import example.imageviewer.style.DarkGray
 import example.imageviewer.utils.displayHeight
 import example.imageviewer.utils.displayWidth
 import example.imageviewer.utils.getDisplayBounds

examples/imageviewer/common/src/desktopMain/kotlin/example/imageviewer/view/MainScreen.kt

@@ -187,7 +187,7 @@ fun setMiniatureUI(
         Row(modifier = Modifier.padding(end = 30.dp)) {
             Clickable(
                 onClick = {
-                    content.setMainImage(picture)
+                    content.fullscreen(picture)
                 }
             ) {
                 Image(