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

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

@@ -126,7 +126,7 @@ class ContentState(
     // application content initialization
     @Composable
     fun initData() {
-
+        println("app")
         if (isAppUIReady.value)
             return
 
@@ -197,13 +197,15 @@ class ContentState(
         if (mainImageWrapper.getId() == picture.id)
             return
 
+        isAppUIReady.value = false
+        AppState.screenState(ScreenType.FullscreenImage)
+
         executor.execute {
             if (isInternetAvailable()) {
 
+                invokeLater {
                     val fullSizePicture = loadFullImage(picture.source)
                     fullSizePicture.id = picture.id
-
-                invokeLater {
                     wrapPictureIntoMainImage(fullSizePicture)
                 }
             } else {

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

@@ -40,11 +40,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/desktopMain/kotlin/example/imageviewer/view/FullImageScreen.kt

@@ -28,22 +28,26 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageAsset
 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.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
 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.DarkGreen
 import example.imageviewer.style.Foreground
 import example.imageviewer.style.MiniatureColor
 import example.imageviewer.style.Transparent
@@ -72,11 +76,30 @@ import java.awt.Rectangle
 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
@@ -89,7 +112,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(
@@ -110,14 +133,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 {
@@ -140,7 +163,7 @@ fun FilterButton(
 ) {
     Surface(
         color = Transparent,
-        modifier = Modifier.gravity(Alignment.CenterVertically),
+        modifier = Modifier.align(Alignment.CenterVertically),
         shape = CircleShape
     ) {
         Clickable(

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

@@ -65,20 +65,25 @@ import org.jetbrains.skija.IRect
 
 @Composable
 fun setMainScreen(content: ContentState) {
+
+    if (content.isContentReady()) {
         Column {
             setTopContent(content)
             setScrollableArea(content)
         }
+    } else {
+        setLoadingScreen(content)
+    }
 }
 
 @Composable
-fun setLoadingScreen(content: ContentState) {
+private fun setLoadingScreen(content: ContentState) {
 
     Stack {
         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(3.dp, 3.dp, 4.dp, 4.dp),
@@ -88,7 +93,7 @@ fun setLoadingScreen(content: ContentState) {
         }
         Text(
             text = ResString.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
         )
@@ -115,11 +120,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(
@@ -183,7 +188,6 @@ fun setMiniatureUI(
             Clickable(
                 onClick = {
                     content.setMainImage(picture)
-                    AppState.screenState(ScreenType.FullscreenImage)
                 }
             ) {
                 Image(
@@ -199,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
             )