when using Navigation got error "skipped x frames! The application may be doing too much work on its main thread."

Issue

I/Choreographer: Skipped 204 frames!  The application may be doing too much work on its main thread.

i saw some same questions here but none of them seems helping in my case

I’m trying to build a music streaming app, files are stored in Firestore storage music is played using Media3, The actions of music player are controlled using Interface
Just like any music app There will be list of songs when clicked it goes to new Screen to control the playback.When i did all this in one screen it worked just fine(track list and Play Button in One Screen)
but after i implemented Navigation and seperated track list and PlayerController in 2 screen(PlayerController show up when clicked any one of trackList) it started to skipping frames

this is how i managed network calls

class TrackRepository {

    private val storage = Firebase.storage
    private val trackRef = storage.reference

    suspend fun getTracks() = suspendCoroutine<List<Track>> { result ->
        val trackList = mutableListOf<Track>()
            try {
                Firebase.firestore.collection(Constants.TRACK).get().addOnCompleteListener { task ->
                    var index = 0
                    task.result.forEach { document ->
                        val trackUrl = trackRef.child(document.getString(Constants.FILENAME)!!)

                        trackUrl.downloadUrl.addOnSuccessListener { trackDownloadUrl ->
                            trackList.add(
                                document.toTrack(
                                    trackDownloadUrl.toString()
                                )
                            )
                            if (index == task.result.size() - 1) {
                                result.resume(trackList)
                            }
                            index++
                        }

                    }
                }

            } catch (e: Exception) {
                e.printStackTrace()
            }

    }

}

&

@HiltViewModel
class TrackViewModel @Inject constructor(trackRepository: TrackRepository): ViewModel() {
    private val _trackList = MutableLiveData<List<Track>>()
    val trackList : LiveData<List<Track>> get() = _trackList

    init {
        viewModelScope.launch() {
            trackRepository.getTracks().let {
                _trackList.postValue(it.sortedBy { it.fileName })
            }
        }
    }
}

this is my PlayerScreen(screen which stopped working) under NavHost

composable("player_screen"){
    val result = navController.previousBackStackEntry?.savedStateHandle?.get<MyTrack>("track")
   PlayerScreen(
     navController = navController,
       onMusicPlayerClick = onMusicPlayerClick,
       track = result?.track!!,
       onTrackItemClick = onTrackItemClick,
       trackList = trackList,
       isPlaying = isPlaying,

   )

}

this is how new screen is called from track list screen

if (selected){

        val newTrack = MyTrack(track, navController, onMusicPlayerClick)
        navController.currentBackStackEntry?.savedStateHandle?.set(
            key = "track",
            value = newTrack
        )
    onTrackItemClick(track)
    navController.navigate("player_screen")


}

it says too much work in main thread but i dont understand what the long running task in my app If it is caused by network calls it would have skipped frame when tried without navigation and Media3 will manage its thread in internal, they suggest to use Main thread for Media3.The only task left as a long running task was Downloader for offline use(starts download if Current Playing song is not available in mobile storage) so i removed Downloader from my code(removed downloader for offline use and ran completely on internet) and still kept skipping frames

i was abled to completely control this error by surrounding

navController.navigate("player_screen") 

in

LaunchedEffect(Unit) 

but i think its not a good solution and it led to some other issues

also i tried Android Profiler to find error but i couldnt understand anything from those charts
these are some Result it shows in android profiler

(the hidden texts are app name(MainActivity))

Solution

The Problem is solved. It was caused by bad usage of remember{mutableStateOf()}

if you have same error

  1. do what error just told you: which is doing less work in main thread
  2. use Android Profiler to detect heavy task check out ->https://developer.android.com/studio/profile/jank-detection
  3. check your resource folder. Inappropriate resizing can also trigger this error

Answered By – Dilshad

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.