Reducing the use of backgrounds to improve rendering speeds.

app/src/main/java/com/vitorpamplona/amethyst/ui/AppScreen.kt

@@ -20,14 +20,10 @@
  */
 package com.vitorpamplona.amethyst.ui
 
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.ui.Modifier
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.google.accompanist.adaptive.calculateDisplayFeatures
 import com.vitorpamplona.amethyst.ServiceManager
@@ -62,19 +58,13 @@ fun AppScreen(
     serviceManager: ServiceManager,
 ) {
     AmethystTheme(sharedPreferencesViewModel) {
-        // A surface container using the 'background' color from the theme
+        val accountStateViewModel: AccountStateViewModel = viewModel()
-        Surface(
+        accountStateViewModel.serviceManager = serviceManager
-            modifier = Modifier.fillMaxSize(),
-            color = MaterialTheme.colorScheme.background,
-        ) {
-            val accountStateViewModel: AccountStateViewModel = viewModel()
-            accountStateViewModel.serviceManager = serviceManager
 
-            LaunchedEffect(key1 = Unit) {
+        LaunchedEffect(key1 = Unit) {
-                accountStateViewModel.tryLoginExistingAccountAsync()
+            accountStateViewModel.tryLoginExistingAccountAsync()
-            }
-
-            AccountScreen(accountStateViewModel, sharedPreferencesViewModel)
         }
+
+        AccountScreen(accountStateViewModel, sharedPreferencesViewModel)
     }
 }

app/src/main/java/com/vitorpamplona/amethyst/ui/navigation/AppBottomBar.kt

@@ -135,7 +135,7 @@ private fun RenderBottomMenu(
         HorizontalDivider(
             thickness = DividerThickness,
         )
-        NavigationBar(tonalElevation = Size0dp) {
+        NavigationBar(tonalElevation = Size0dp, containerColor = Color.Transparent) {
             bottomNavigationItems.forEach { item ->
                 HasNewItemsIcon(item, accountViewModel, navEntryState, nav)
             }

app/src/main/java/com/vitorpamplona/amethyst/ui/navigation/DrawerContent.kt

@@ -239,7 +239,6 @@ fun ProfileContentTemplate(
                         .height(100.dp)
                         .clip(shape = CircleShape)
                         .border(3.dp, MaterialTheme.colorScheme.background, CircleShape)
-                        .background(MaterialTheme.colorScheme.background)
                         .clickable(onClick = onClick),
                 loadProfilePicture = accountViewModel.settings.showProfilePictures.value,
             )

app/src/main/java/com/vitorpamplona/amethyst/ui/note/NoteCompose.kt

@@ -135,7 +135,6 @@ import com.vitorpamplona.amethyst.ui.theme.grayText
 import com.vitorpamplona.amethyst.ui.theme.newItemBackgroundColor
 import com.vitorpamplona.amethyst.ui.theme.normalWithTopMarginNoteModifier
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
-import com.vitorpamplona.amethyst.ui.theme.replyBackground
 import com.vitorpamplona.amethyst.ui.theme.replyModifier
 import com.vitorpamplona.quartz.events.AppDefinitionEvent
 import com.vitorpamplona.quartz.events.AudioHeaderEvent
@@ -349,10 +348,10 @@ fun calculateBackgroundColor(
                         newItemColor.compositeOver(defaultBackgroundColor)
                     }
                 } else {
-                    parentBackgroundColor?.value ?: defaultBackgroundColor
+                    parentBackgroundColor?.value ?: Color.Transparent
                 }
             } else {
-                parentBackgroundColor?.value ?: defaultBackgroundColor
+                parentBackgroundColor?.value ?: Color.Transparent
             },
         )
     }
@@ -855,15 +854,6 @@ fun ReplyNoteComposition(
     accountViewModel: AccountViewModel,
     nav: (String) -> Unit,
 ) {
-    val defaultReplyBackground = MaterialTheme.colorScheme.replyBackground
-
-    val replyBackgroundColor =
-        remember {
-            mutableStateOf(
-                defaultReplyBackground.compositeOver(backgroundColor.value),
-            )
-        }
-
     NoteCompose(
         baseNote = replyingDirectlyTo,
         isQuotedNote = true,
@@ -871,7 +861,7 @@ fun ReplyNoteComposition(
         modifier = MaterialTheme.colorScheme.replyModifier,
         unPackReply = false,
         makeItShort = true,
-        parentBackgroundColor = replyBackgroundColor,
+        parentBackgroundColor = backgroundColor,
         accountViewModel = accountViewModel,
         nav = nav,
     )

app/src/main/java/com/vitorpamplona/amethyst/ui/note/UserProfilePicture.kt

@@ -24,13 +24,11 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -90,11 +88,9 @@ fun DisplayBlankAuthor(
     size: Dp,
     modifier: Modifier = Modifier,
 ) {
-    val backgroundColor = MaterialTheme.colorScheme.background
-
     val nullModifier =
         remember {
-            modifier.size(size).clip(shape = CircleShape).background(backgroundColor)
+            modifier.size(size).clip(shape = CircleShape)
         }
 
     RobohashAsyncImage(
@@ -345,10 +341,9 @@ fun InnerUserPicture(
     modifier: Modifier,
     accountViewModel: AccountViewModel,
 ) {
-    val backgroundColor = MaterialTheme.colorScheme.background
     val myImageModifier =
         remember {
-            modifier.size(size).clip(shape = CircleShape).background(backgroundColor)
+            modifier.size(size).clip(shape = CircleShape)
         }
 
     val automaticallyShowProfilePicture =

app/src/main/java/com/vitorpamplona/amethyst/ui/qrcode/ShowQRDialog.kt

@@ -123,8 +123,7 @@ fun ShowQRDialog(
                                         Modifier.width(100.dp)
                                             .height(100.dp)
                                             .clip(shape = CircleShape)
-                                            .border(3.dp, MaterialTheme.colorScheme.background, CircleShape)
+                                            .border(3.dp, MaterialTheme.colorScheme.background, CircleShape),
-                                            .background(MaterialTheme.colorScheme.background),
                                     loadProfilePicture = loadProfilePicture,
                                 )
                             }

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/AccountScreen.kt

@@ -29,7 +29,10 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -71,10 +74,21 @@ fun AccountScreen(
     ) { state ->
         when (state) {
             is AccountState.Loading -> {
-                LoadingAccounts()
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colorScheme.background,
+                ) {
+                    LoadingAccounts()
+                }
             }
-            is AccountState.LoggedOff -> {
+            is AccountState.LoggedOff -> { // A surface container using the 'background' color from the theme
-                LoginOrSignupScreen(accountStateViewModel, isFirstLogin = true)
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colorScheme.background,
+                ) {
+                    LoginOrSignupScreen(accountStateViewModel, isFirstLogin = true)
+                }
             }
             is AccountState.LoggedIn -> {
                 CompositionLocalProvider(

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/BookmarkListScreen.kt

@@ -35,6 +35,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.vitorpamplona.amethyst.R
@@ -84,7 +85,7 @@ private fun RenderBookmarkScreen(
         val coroutineScope = rememberCoroutineScope()
 
         TabRow(
-            containerColor = MaterialTheme.colorScheme.background,
+            containerColor = Color.Transparent,
             contentColor = MaterialTheme.colorScheme.onBackground,
             selectedTabIndex = pagerState.currentPage,
             modifier = TabRowHeight,

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/ChatroomListScreen.kt

@@ -57,6 +57,7 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -249,7 +250,7 @@ fun ChatroomListScreenOnlyList(
     ) {
         Box(Modifier.fillMaxWidth()) {
             TabRow(
-                containerColor = MaterialTheme.colorScheme.background,
+                containerColor = Color.Transparent,
                 contentColor = MaterialTheme.colorScheme.onBackground,
                 selectedTabIndex = pagerState.currentPage,
                 modifier = TabRowHeight,

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/DiscoverScreen.kt

@@ -50,6 +50,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -192,7 +193,7 @@ private fun DiscoverPages(
     nav: (String) -> Unit,
 ) {
     ScrollableTabRow(
-        containerColor = MaterialTheme.colorScheme.background,
+        containerColor = Color.Transparent,
         contentColor = MaterialTheme.colorScheme.onBackground,
         selectedTabIndex = pagerState.currentPage,
         modifier = TabRowHeight,

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/HomeScreen.kt

@@ -45,6 +45,7 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -174,7 +175,7 @@ private fun HomePages(
     nav: (String) -> Unit,
 ) {
     TabRow(
-        containerColor = MaterialTheme.colorScheme.background,
+        containerColor = Color.Transparent,
         contentColor = MaterialTheme.colorScheme.onBackground,
         modifier = TabRowHeight,
         selectedTabIndex = pagerState.currentPage,

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/MainScreen.kt

@@ -32,7 +32,6 @@ import androidx.compose.animation.scaleOut
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.animation.togetherWith
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.defaultMinSize
@@ -40,7 +39,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.DrawerValue
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.ModalNavigationDrawer
 import androidx.compose.material3.Scaffold
@@ -353,8 +351,9 @@ fun MainScreen(
         },
         content = {
             Scaffold(
+                // containerColor = Color.Unspecified,
                 modifier =
-                    Modifier.background(MaterialTheme.colorScheme.secondary)
+                    Modifier
                         .statusBarsPadding()
                         .nestedScroll(nestedScrollConnection),
                 bottomBar = {

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/ProfileScreen.kt

@@ -473,7 +473,7 @@ private fun RenderScreen(
     Column {
         ProfileHeader(baseUser, appRecommendations, nav, accountViewModel)
         ScrollableTabRow(
-            containerColor = MaterialTheme.colorScheme.background,
+            containerColor = Color.Transparent,
             contentColor = MaterialTheme.colorScheme.onBackground,
             selectedTabIndex = pagerState.currentPage,
             edgePadding = 8.dp,
@@ -1410,8 +1410,6 @@ private fun WatchAndRenderBadgeImage(
             }
         }
 
-    val bgColor = MaterialTheme.colorScheme.background
-
     if (image == null) {
         RobohashAsyncImage(
             robot = "authornotfound",
@@ -1421,7 +1419,6 @@ private fun WatchAndRenderBadgeImage(
                     pictureModifier
                         .width(size)
                         .height(size)
-                        .background(bgColor)
                 },
         )
     } else {
@@ -1435,7 +1432,6 @@ private fun WatchAndRenderBadgeImage(
                         .width(size)
                         .height(size)
                         .clip(shape = CutCornerShape(20))
-                        .background(bgColor)
                         .run {
                             if (onClick != null) {
                                 this.clickable(onClick = { onClick(eventId) })

app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt

@@ -183,51 +183,43 @@ val DarkChannelNotePictureModifier =
     Modifier
         .size(30.dp)
         .clip(shape = CircleShape)
-        .background(DarkColorPalette.background)
         .border(2.dp, DarkColorPalette.background, CircleShape)
 
 val LightChannelNotePictureModifier =
     Modifier
         .size(30.dp)
         .clip(shape = CircleShape)
-        .background(LightColorPalette.background)
         .border(2.dp, LightColorPalette.background, CircleShape)
 
 val LightRelayIconModifier =
     Modifier
         .size(Size13dp)
         .clip(shape = CircleShape)
-        .background(LightColorPalette.background)
 
 val DarkRelayIconModifier =
     Modifier
         .size(Size13dp)
         .clip(shape = CircleShape)
-        .background(DarkColorPalette.background)
 
 val LightLargeRelayIconModifier =
     Modifier
         .size(Size55dp)
         .clip(shape = CircleShape)
-        .background(LightColorPalette.background)
 
 val DarkLargeRelayIconModifier =
     Modifier
         .size(Size55dp)
         .clip(shape = CircleShape)
-        .background(DarkColorPalette.background)
 
 val LightBottomIconModifier =
     Modifier
         .size(Size10dp)
         .clip(shape = CircleShape)
-        .background(LightColorPalette.primary)
 
 val DarkBottomIconModifier =
     Modifier
         .size(Size10dp)
         .clip(shape = CircleShape)
-        .background(DarkColorPalette.primary)
 
 val RichTextDefaults = RichTextStyle().resolveDefaults()