White background
taasonei opened this issue · comments
Please complete the following information:
-
Library Version [v2.2.2]
implementation 'com.github.skydoves:landscapist-glide:2.2.2'
implementation 'com.github.skydoves:landscapist-coil:2.2.2'
implementation 'com.github.skydoves:landscapist-placeholder:2.2.2' -
Affected Device(s) [Not a device specific]
Describe the Bug:
I've tried GlideImage
and CoilImage
. Both show white background when image loading. It appears before loading placeholder:
error placeholder -> white background -> loading placeholder -> loaded image
There is no white background when using coil or glide compose instead
Sample code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ImageTestTheme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
MainScreen()
}
}
}
}
}
@Composable
private fun MainScreen() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
var imageRes by remember { mutableStateOf("") }
key(imageRes) {
CoilImage(
modifier = Modifier
.height(300.dp)
.fillMaxWidth(),
imageModel = remember { { imageRes } },
imageOptions = remember {
ImageOptions(
contentScale = ContentScale.Crop,
)
},
previewPlaceholder = R.drawable.ic_empty_image,
component = rememberImageComponent {
+ShimmerPlugin(
baseColor = Color.DarkGray,
highlightColor = Color.LightGray
)
+PlaceholderPlugin.Failure(painterResource(id = R.drawable.ic_broken_image))
},
)
}
Button(
onClick = remember { { imageRes = Generator.generate() } } ) {
Text(text = "Update")
}
}
}
object Generator {
private val list = listOf(
"https://proprikol.ru/wp-content/uploads/2019/08/kartinki-nyashnye-kotiki-16.jpg",
"https://www.wallpaperflare.com/static/688/210/437/landscape-nature-sunset-river-wallpaper.jpg",
"https://i.pinimg.com/736x/d1/db/93/d1db93fed23ae10972bfac57406142a9.jpg"
)
fun generate(): String = list.random()
}
Video sample (slowing)
lv_0_20230711120747.mp4
Expected Behavior:
error placeholder -> loading placeholder -> loaded image
@taasonei I think this result is an expected result because Landscapist doesn't compose everything from the first, it observes the state and compose each different composables depending on its state.
Let me think if there's a great way to make the transition smooth with fade animation or something.
@taasonei I'm wondering what if you use the Crossfade
over GlideImage
like the sample below?
Crossfade(targetState = imageRes, label = "") { image ->
CoilImage(
)
..
@skydoves looks like there is no difference when I add Crossfade
, white background's still visible
any update on this issue?
A similar thing is happening for me. It's a gray box that appears every time before the loading preview appears. There's no error placeholder being shown. It's especially jarring while scrolling in a grid with multiple items because you see a lot of gray boxes really quickly and then the loading state/image.
I think this could be the same issue but our apps have different default color schemes? Not sure though
Hey @JayyyR, sorry for the delayed response. Do you use a shimmering effect or what placeholder do you use?
It would be really helpful to debug if you could share the imageComponent
implementation on your project. Thanks!