Skip to content

Instantly share code, notes, and snippets.

// Optimized: All effects in one layer, shape evaluated once
@Composable
fun ElegantCard(content: @Composable () -> Unit) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.graphicsLayer {
alpha = 0.95f
shape = RoundedCornerShape(12.dp)
// Looks innocent, but creates multiple expensive layers
@Composable
fun ElegantCard(content: @Composable () -> Unit) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.alpha(0.95f) // Layer #1: Transparency
.clip(RoundedCornerShape(12.dp)) // Layer #2: Clipping path
.shadow(8.dp, RoundedCornerShape(12.dp)) // Layer #3: Often another layer
// Optimized: single source of truth for spacing
Card {
Column(
modifier = Modifier.padding(32.dp),
verticalArrangement = Arrangement.spacedBy(8.dp) // built-in spacing
) {
Text("Breaking News")
Text("Latest updates from the tech world...")
}
}
// Optimized - precise, performant, and predictable
@Composable
fun ListItem(title: String, subtitle: String, onClick: () -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth() // 1. Layout: Define the width
.padding(16.dp) // 2. Layout: Create space within those bounds
.background( // 3. Appearance: Draw the background in the padded area
color = Color.LightGray,
shape = RoundedCornerShape(8.dp)
// Common pattern - creates performance and UX issues
@Composable
fun ListItem(title: String, subtitle: String, onClick: () -> Unit) {
Row(
modifier = Modifier
.clickable { onClick() } // 1. Interaction first?
.fillMaxWidth() // 2. Then Layout...
.padding(16.dp) // 3. ...and more layout
.background( // 4. Finally, appearance
color = Color.LightGray,
// After: same visual, fewer layers, bounded ripple
Modifier
.fillMaxWidth() // layout first
.padding(12.dp)
.graphicsLayer { // consolidate heavy ops
alpha = 0.98f
shape = RoundedCornerShape(12.dp)
clip = true
shadowElevation = 4.dp.toPx()
}
// Before: A typical "just make it work" modifier chain
// Before: "works", but heavier than it looks
Modifier
.clickable { onMessageClick() } // hit-test too early
.padding(horizontal = 12.dp, vertical = 6.dp)
.background(
color = MaterialTheme.colorScheme.surfaceVariant,
shape = RoundedCornerShape(12.dp)
)
.fillMaxWidth()
@linreal
linreal / OrbitalLoader.kt
Created January 25, 2026 07:52
Jetpack Compose OrbitalLoader
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.StartOffset
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ShowCarousels(sections: List<Section>) {
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
items(sections, key = { it.id }) { section ->
val rowState = rememberLazyListState(
prefetchStrategy = LazyListPrefetchStrategy(
nestedPrefetchItemCount = 6)
// RecyclerView
override fun getItemViewType(position: Int): Int {
return when (items[position]) {
is TextMessage -> VIEW_TYPE_TEXT
is ImageMessage -> VIEW_TYPE_IMAGE
is VideoMessage -> VIEW_TYPE_VIDEO
else -> VIEW_TYPE_UNKNOWN
}
}