Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Placeholder] Prototype for new library #457

Merged
merged 13 commits into from
Jun 3, 2021
Merged

[Placeholder] Prototype for new library #457

merged 13 commits into from
Jun 3, 2021

Conversation

fornewid
Copy link
Contributor

@fornewid fornewid commented Jun 1, 2021

I created a prototype for content placeholders.
If it's okay to go ahead, I'll add some test code.
Or, if you advise on the direction, I will correct it.


New APIs:

  • We can use Modifier.placeholder(visible: Boolean) to show a content placeholder.
  • And we can show an animated content placeholder
    using PlaceholderAnimatedBrush like fadeBrush() or shimmerBrush().

Fixes #336

Demo

Basic Fade Shimmer

@google-cla google-cla bot added the cla: yes label Jun 1, 2021
@chrisbanes
Copy link
Contributor

Thanks, I'll take a look at this tomorrow once the next release is out.

Copy link
Contributor

@chrisbanes chrisbanes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start! 👏 👏 👏 👏 👏

Left a few comments but its not far off!

return result
}

override fun equals(other: Any?): Boolean {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for equals/hashcode here.

import androidx.compose.ui.graphics.lerp

internal object PlaceholderDefaults {
val PlaceholderColor = Color.Gray.copy(alpha = 0.5f)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you use Gray here to avoid a dependency on Material? Ideally this would be set to contentColor() but I'm not sure that we want to depend on Material

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I used Gray to avoid dependency on Material.
But if it's better to rely on the material, I'll change.

- Add the explicit return type.
- Only create one modifier on every animation frame.
- Remove equals/hashcode in Placeholder.
- Use default easing instead of LinearEasing.
- Change PlaceholderDefaults to public class.
- Move functions for PlaceholderAnimatedBrush inside the companion object.
- Add kdoc.
@fornewid
Copy link
Contributor Author

fornewid commented Jun 3, 2021

I applied all comments. 🙇

@chrisbanes chrisbanes merged commit 2930e1c into google:main Jun 3, 2021
@moffpage
Copy link

moffpage commented Jun 3, 2021

Omg 😍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Idea] Content placeholder/skeleton UI
3 participants