Merge pull request #543 from rahul31124/Fixed-Lag-In-SongsOverviewScreen

Fixed-Lag-In-SongsOverviewScreen
metabrainz · Feb 1, 2025 · bec07e6 · bec07e6
2 parents f0005b2 + ca53169
commit bec07e6
Showing 1 changed file with 115 additions and 62 deletions.
diff --git a/...ain/java/org/listenbrainz/android/ui/screens/brainzplayer/overview/SongsOverviewScreen.kt b/...ain/java/org/listenbrainz/android/ui/screens/brainzplayer/overview/SongsOverviewScreen.kt
@@ -1,18 +1,27 @@
 package org.listenbrainz.android.ui.screens.brainzplayer.overview
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
@@ -21,8 +30,9 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
 import org.listenbrainz.android.R
-import org.listenbrainz.android.model.Artist
 import org.listenbrainz.android.model.Song
 import org.listenbrainz.android.ui.components.BrainzPlayerDropDownMenu
 import org.listenbrainz.android.ui.components.ListenCardSmall
@@ -34,77 +44,120 @@ import org.listenbrainz.android.viewmodel.BrainzPlayerViewModel
 fun SongsOverviewScreen(
     songs: List<Song>,
     onPlayIconClick: (Song, List<Song>) -> Unit,
-    onPlayNext : (Song) -> Unit,
-    onAddToQueue : (Song) -> Unit,
-    onAddToExistingPlaylist : (Song) -> Unit,
-    onAddToNewPlaylist : (Song) -> Unit,
+    onPlayNext: (Song) -> Unit,
+    onAddToQueue: (Song) -> Unit,
+    onAddToExistingPlaylist: (Song) -> Unit,
+    onAddToNewPlaylist: (Song) -> Unit,
 ) {
-    val songsStarting  = remember(songs.size) {
-        val songsStarting = mutableMapOf<Char, MutableList<Song>>()
-        for (i in 0..25) {
-            songsStarting['A' + i] = mutableListOf()
-        }
+    val songsStarting = remember { mutableStateOf<Map<Char, List<Song>>>(emptyMap()) }
+
+    LaunchedEffect(songs) {
+        withContext(Dispatchers.Default) {
+            val groupedSongs = mutableMapOf<Char, MutableList<Song>>()
+            for (i in 0..25) {
+                groupedSongs['A' + i] = mutableListOf()
+            }
+
+            songs.forEach { song ->
+                val firstChar = song.title.firstOrNull()?.uppercaseChar() ?: '#'
+                groupedSongs[firstChar]?.add(song)
+            }
 
-        for (i in 1..songs.size) {
-            songsStarting[songs[i - 1].title[0]]?.add(songs[i-1])
+            songsStarting.value = groupedSongs
         }
-        songsStarting
     }
 
     val viewModel: BrainzPlayerViewModel = hiltViewModel()
-    val currentlyPlayingSong = viewModel.currentlyPlayingSong.collectAsStateWithLifecycle().value.toSong
+    val currentlyPlayingSong =
+        viewModel.currentlyPlayingSong.collectAsStateWithLifecycle().value.toSong
 
-    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
-        for (i in 0..25) {
-            val startingLetter = ('A' + i)
-            if (songsStarting[startingLetter]!!.isNotEmpty()) {
-                Column(
-                    modifier = Modifier.background(
-                        brush = ListenBrainzTheme.colorScheme.gradientBrush
-                    ).padding(top = 15.dp, bottom = 15.dp)
-                ) {
-                    Text(
-                        startingLetter.toString(),
-                        modifier = Modifier.padding(start = 10.dp, top = 10.dp, bottom = 5.dp),
-                        style = TextStyle(
-                            color = ListenBrainzTheme.colorScheme.lbSignature,
-                            fontSize = 20.sp,
-                            fontFamily = FontFamily(Font(R.font.roboto_bold)),
-                        )
-                    )
-                    for (j in 1..songsStarting[startingLetter]!!.size) {
-                        val song = songsStarting[startingLetter]!![j-1]
-                        val coverArt = songsStarting[startingLetter]!![j - 1].albumArt
-
-                        var showDropdown by remember { mutableStateOf(false) }
+    val areSongsLoaded by remember {
+        derivedStateOf {
+            songsStarting.value.isNotEmpty()
+        }
+    }
 
-                        ListenCardSmall(
-                            modifier = Modifier.padding(start = 10.dp, end = 10.dp),
-                            trackName = songsStarting[startingLetter]!![j - 1].title,
-                            artist = songsStarting[startingLetter]!![j - 1].artist,
-                            coverArtUrl = coverArt,
-                            errorAlbumArt = R.drawable.ic_erroralbumart,
-                            onClick = { onPlayIconClick(song, songsStarting[startingLetter]!!) },
-                            onDropdownIconClick = {
-                                showDropdown = !showDropdown
-                            },
-                            goToArtistPage = { },
-                            isPlaying = song.mediaID == currentlyPlayingSong.mediaID,
-                            dropDown = {
-                                BrainzPlayerDropDownMenu(
-                                    onAddToNewPlaylist = {onAddToNewPlaylist(song)},
-                                    onAddToExistingPlaylist = {onAddToExistingPlaylist(song)},
-                                    onAddToQueue = {onAddToQueue(song)},
-                                    onPlayNext = {onPlayNext(song)},
-                                    expanded = showDropdown,
-                                    onDismiss = { showDropdown = false },
+    AnimatedContent(
+        modifier = Modifier.fillMaxSize(),
+        targetState = areSongsLoaded,
+        transitionSpec = { fadeIn() togetherWith fadeOut() }
+    ) { areSongsLoaded ->
+        if (areSongsLoaded) {
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(brush = ListenBrainzTheme.colorScheme.gradientBrush)
+            ) {
+                songsStarting.value.forEach { (startingLetter, songList) ->
+                    if (songList.isNotEmpty()) {
+                        item {
+                            Column(
+                                modifier = Modifier.padding(top = 15.dp, bottom = 15.dp)
+                            ) {
+                                Text(
+                                    startingLetter.toString(),
+                                    modifier = Modifier.padding(start = 10.dp, top = 10.dp, bottom = 5.dp),
+                                    style = TextStyle(
+                                        color = ListenBrainzTheme.colorScheme.lbSignature,
+                                        fontSize = 20.sp,
+                                        fontFamily = FontFamily(Font(R.font.roboto_bold)),
+                                    )
                                 )
                             }
-                        )
-                        Spacer(modifier = Modifier.height(10.dp))
+                        }
+
+                        items(songList) { song ->
+                            val coverArt = song.albumArt
+                            var showDropdown by remember { mutableStateOf(false) }
+                            ListenCardSmall(
+                                modifier = Modifier.padding(start = 10.dp, end = 10.dp),
+                                trackName = song.title,
+                                artist = song.artist,
+                                coverArtUrl = coverArt,
+                                errorAlbumArt = R.drawable.ic_erroralbumart,
+                                onClick = {
+                                    onPlayIconClick(song, songList)
+                                },
+                                onDropdownIconClick = {
+                                    showDropdown = !showDropdown
+                                },
+                                goToArtistPage = { },
+                                isPlaying = song.mediaID == currentlyPlayingSong.mediaID,
+                                dropDown = {
+                                    BrainzPlayerDropDownMenu(
+                                        onAddToNewPlaylist = {
+                                            onAddToNewPlaylist(song)
+                                        },
+                                        onAddToExistingPlaylist = {
+                                            onAddToExistingPlaylist(song)
+                                        },
+                                        onAddToQueue = {
+                                            onAddToQueue(song)
+                                        },
+                                        onPlayNext = {
+                                            onPlayNext(song)
+                                        },
+                                        expanded = showDropdown,
+                                        onDismiss = { showDropdown = false }
+                                    )
+                                }
+                            )
+                            Spacer(modifier = Modifier.height(10.dp))
+                        }
                     }
                 }
             }
+        } else {
+            Box(
+                modifier =  Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    modifier = Modifier.padding(12.dp),
+                    text = "Loading songs...",
+                    color = ListenBrainzTheme.colorScheme.text
+                )
+            }
         }
     }
-}
+}