Library offers a modifier for displaying 'placeholder' UI while content loads. Features include basic placeholders, default color options, and highlight animations like fade and shimmer for enhanced user experience.
A Compose multiplatform library (android, ios, jvm, and js) which provides a modifier for displaying 'placeholder' UI while content is loading.
In July 2023, the Accompanist project deprecated the placeholder artifact. This library was forked and published to replace it. See the migration guide
More information on the UX provided by this library can be found on the Material Theming Placeholder UI guidelines.
There are actually three versions of the library available:
[!NOTE] You only need to use one of the libraries, and most apps should use Placeholder Material or Placeholder Material 3. The APIs of the libraries are (mostly) equivalent with only the imports being different. Where possible we have provided equivalent code samples below.
repositories {
mavenCentral()
}
dependencies {
// If you're using Material, use compose-placeholder-material
implementation("com.eygraber:compose-placeholder-material:1.0.12")
// If you're using Material 3, use compose-placeholder-material3
implementation("com.eygraber:compose-placeholder-material3:1.0.12")
// Otherwise use the foundation version
implementation("com.eygraber:compose-placeholder:1.0.12")
}
Snapshots are available here.
At the most basic usage, the modifier will draw a shape over your composable content, filled with the provided color.
import com.eygraber.compose.placeholder.material.placeholder
Text(
text = "Content to display after content has loaded",
modifier = Modifier
.padding(16.dp)
.placeholder(visible = true)
)
import com.eygraber.compose.placeholder.placeholder
Text(
text = "Content to display after content has loaded",
modifier = Modifier
.padding(16.dp)
.placeholder(
visible = true,
color = Color.Gray,
// optional, defaults to RectangleShape
shape = RoundedCornerShape(4.dp),
)
)
The library also provides some 'highlight' animations to entertain the user while they are waiting. There are two provided by the library, but you can also provide your own.
This highlight fades a color over the entire placeholder in and out.
import com.eygraber.compose.placeholder.PlaceholderHighlight
import com.eygraber.compose.placeholder.material.placeholder
import com.eygraber.compose.placeholder.material.fade
Text(
text = "Content to display after content has loaded",
modifier = Modifier
.padding(16.dp)
.placeholder(
visible = true,
highlight = PlaceholderHighlight.fade(),
)
)
import com.eygraber.compose.placeholder.PlaceholderHighlight
import com.eygraber.compose.placeholder.placeholder
import com.eygraber.compose.placeholder.fade
Text(
text = "Content to display after content has loaded",
modifier = Modifier
.padding(16.dp)
.placeholder(
visible = true,
color = Color.Gray,
// optional, defaults to RectangleShape
shape = RoundedCornerShape(4.dp),
highlight = PlaceholderHighlight.fade(
highlightColor = Color.White,
),
)
)
This displays a gradient shimmer effect which emanates from the top-start corner.
import com.eygraber.compose.placeholder.PlaceholderHighlight
import com.eygraber.compose.placeholder.material.placeholder
import com.eygraber.compose.placeholder.material.shimmer
Text(
text = "Content to display after content has loaded",
modifier = Modifier
.padding(16.dp)
.placeholder(
visible = true,
highlight = PlaceholderHighlight.shimmer(),
)
)
import com.eygraber.compose.placeholder.PlaceholderHighlight
import com.eygraber.compose.placeholder.placeholder
import com.eygraber.compose.placeholder.shimmer
Text(
text = "Content to display after content has loaded",
modifier = Modifier
.padding(16.dp)
.placeholder(
visible = true,
color = Color.Gray,
// optional, defaults to RectangleShape
shape = RoundedCornerShape(4.dp),
highlight = PlaceholderHighlight.shimmer(
highlightColor = Color.White,
),
)
)
Please contribute! We will gladly review any pull requests.
Copyright 2021 The Android Open Source Project
Copyright 2023 Eliezer Graber
Licensed under the Apache License, Version 2.0 (the "License");
you may use except compliance the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Surfaced from shared tags and platforms — no rankings paid for.