From 5d65725ead66a50570e9ba9ae19e495b0ede997b Mon Sep 17 00:00:00 2001
From: Ankur <ankurmbhat@gmail.com>
Date: Tue, 6 Feb 2024 16:17:52 -0800
Subject: [PATCH 1/5] Fix [ChannelFragment]: resolve stuttering at bottom of
 scroll

-Removed ScrollView. RecyclerView itself handles scrolling, nesting it inside a ScrollView is possibly leading to conflicting scrolling behavior effecting performance(i.e stuttering when scrolling at bottom and updating list with new data items).

-Used AppBarLayout and CollapsingToolbarLayout as containers for content(banner etc) above list of videos items. Together with CoordinatorLayout, these components streamline scrolling behavior and UI interactions with each other and RecyclerView.
---
 .../libretube/ui/fragments/ChannelFragment.kt |   5 +-
 app/src/main/res/layout/fragment_channel.xml  | 298 +++++++++---------
 2 files changed, 155 insertions(+), 148 deletions(-)

diff --git a/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
index 0a6d27b7c..eeee9f711 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
@@ -90,10 +90,10 @@ class ChannelFragment : DynamicLayoutManagerFragment() {
             fetchChannel()
         }
 
-        binding.channelScrollView.viewTreeObserver.addOnScrollChangedListener {
+        binding.channelRecView.viewTreeObserver.addOnScrollChangedListener {
             val binding = _binding ?: return@addOnScrollChangedListener
 
-            if (binding.channelScrollView.canScrollVertically(1) || isLoading) return@addOnScrollChangedListener
+            if (binding.channelRecView.canScrollVertically(1) || isLoading) return@addOnScrollChangedListener
 
             loadNextPage()
         }
@@ -199,7 +199,6 @@ class ChannelFragment : DynamicLayoutManagerFragment() {
         isLoading = false
         binding.channelRefresh.isRefreshing = false
 
-        binding.channelScrollView.isVisible = true
         binding.channelName.text = response.name
         if (response.verified) {
             binding.channelName
diff --git a/app/src/main/res/layout/fragment_channel.xml b/app/src/main/res/layout/fragment_channel.xml
index 77c26fb09..c033d726c 100644
--- a/app/src/main/res/layout/fragment_channel.xml
+++ b/app/src/main/res/layout/fragment_channel.xml
@@ -6,165 +6,173 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <ScrollView
-        android:id="@+id/channel_scrollView"
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:orientation="vertical"
-        android:visibility="invisible"
-        tools:context=".ui.fragments.ChannelFragment">
+        android:layout_height="match_parent">
 
-        <LinearLayout
+        <com.google.android.material.appbar.AppBarLayout
+            android:id="@+id/channel_app_bar"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:orientation="vertical">
+            android:layout_height="wrap_content">
 
-            <ImageView
-                android:id="@+id/channel_banner"
+            <com.google.android.material.appbar.CollapsingToolbarLayout
+                android:id="@+id/channel_collapsing_tb"
                 android:layout_width="match_parent"
-                android:layout_height="80dp" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:layout_gravity="center"
-                android:layout_margin="10dp"
-                android:orientation="horizontal">
-
-                <com.google.android.material.imageview.ShapeableImageView
-                    android:id="@+id/channel_image"
-                    android:layout_width="45dp"
-                    android:layout_height="45dp"
-                    android:layout_gravity="center"
-                    app:shapeAppearance="@style/CircleImageView" />
+                android:layout_height="wrap_content"
+                app:layout_scrollFlags="scroll"
+                app:titleCollapseMode="scale">
 
                 <LinearLayout
-                    android:layout_width="0dp"
-                    android:layout_height="match_parent"
-                    android:layout_marginStart="10dp"
-                    android:layout_marginEnd="5dp"
-                    android:layout_weight="1"
-                    android:orientation="vertical">
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    app:layout_collapseMode="pin">
 
-                    <TextView
-                        android:id="@+id/channel_name"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_gravity="start"
-                        android:layout_marginTop="3.5dp"
-                        android:drawablePadding="3dp"
-                        android:ellipsize="end"
-                        android:maxLines="1"
-                        android:textSize="16sp"
-                        android:textStyle="bold"
-                        tools:text="Channel Name" />
+                    <ImageView
+                        android:id="@+id/channel_banner"
+                        android:layout_width="match_parent"
+                        android:layout_height="80dp" />
 
-                    <TextView
-                        android:id="@+id/channel_subs"
-                        android:layout_width="wrap_content"
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="match_parent"
+                        android:layout_gravity="center"
+                        android:layout_margin="10dp"
+                        android:orientation="horizontal">
+
+                        <com.google.android.material.imageview.ShapeableImageView
+                            android:id="@+id/channel_image"
+                            android:layout_width="45dp"
+                            android:layout_height="45dp"
+                            android:layout_gravity="center"
+                            app:shapeAppearance="@style/CircleImageView" />
+
+                        <LinearLayout
+                            android:layout_width="0dp"
+                            android:layout_height="match_parent"
+                            android:layout_marginStart="10dp"
+                            android:layout_marginEnd="5dp"
+                            android:layout_weight="1"
+                            android:orientation="vertical">
+
+                            <TextView
+                                android:id="@+id/channel_name"
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:layout_gravity="start"
+                                android:layout_marginTop="3.5dp"
+                                android:drawablePadding="3dp"
+                                android:ellipsize="end"
+                                android:maxLines="1"
+                                android:textSize="16sp"
+                                android:textStyle="bold"
+                                tools:text="Channel Name" />
+
+                            <TextView
+                                android:id="@+id/channel_subs"
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:layout_gravity="start"
+                                android:maxLines="1"
+                                android:text="@string/app_name"
+                                android:textSize="12sp" />
+
+                        </LinearLayout>
+
+                        <com.google.android.material.button.MaterialButton
+                            android:id="@+id/channel_share"
+                            style="@style/ElevatedIconButton"
+                            android:tooltipText="@string/share"
+                            app:icon="@drawable/ic_share"
+                            tools:targetApi="m" />
+
+                        <com.google.android.material.button.MaterialButton
+                            android:id="@+id/notification_bell"
+                            style="@style/ElevatedIconButton"
+                            android:tooltipText="@string/notifications"
+                            app:icon="@drawable/ic_notification"
+                            tools:targetApi="m" />
+
+                        <com.google.android.material.button.MaterialButton
+                            android:id="@+id/channel_subscribe"
+                            style="@style/Widget.Material3.Button.ElevatedButton"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:drawableTint="?android:attr/textColorPrimary"
+                            android:stateListAnimator="@null"
+                            android:text="@string/subscribe"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="12sp"
+                            app:cornerRadius="20dp"
+                            app:elevation="20dp"
+                            tools:targetApi="m" />
+
+                    </LinearLayout>
+
+                    <com.github.libretube.ui.views.ExpandableTextView
+                        android:id="@+id/channel_description"
+                        android:layout_width="match_parent"
                         android:layout_height="wrap_content"
-                        android:layout_gravity="start"
-                        android:maxLines="1"
-                        android:text="@string/app_name"
-                        android:textSize="12sp" />
+                        android:layout_marginHorizontal="5dp"
+                        android:autoLink="web"
+                        android:padding="10dp" />
+
+                    <HorizontalScrollView
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:paddingHorizontal="10dp"
+                        android:scrollbars="none">
+
+                        <com.google.android.material.chip.ChipGroup
+                            android:id="@+id/tab_chips"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            app:checkedChip="@+id/videos"
+                            app:selectionRequired="true"
+                            app:singleLine="true"
+                            app:singleSelection="true">
+
+                            <com.google.android.material.chip.Chip
+                                android:id="@id/videos"
+                                style="@style/channelChip"
+                                android:text="@string/videos"
+                                android:visibility="visible" />
+
+                            <com.google.android.material.chip.Chip
+                                android:id="@+id/shorts"
+                                style="@style/channelChip"
+                                android:text="@string/yt_shorts" />
+
+                            <com.google.android.material.chip.Chip
+                                android:id="@+id/livestreams"
+                                style="@style/channelChip"
+                                android:text="@string/livestreams" />
+
+                            <com.google.android.material.chip.Chip
+                                android:id="@+id/playlists"
+                                style="@style/channelChip"
+                                android:text="@string/playlists" />
+
+                            <com.google.android.material.chip.Chip
+                                android:id="@+id/channels"
+                                style="@style/channelChip"
+                                android:text="@string/channels" />
+
+                        </com.google.android.material.chip.ChipGroup>
+
+                    </HorizontalScrollView>
 
                 </LinearLayout>
 
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/channel_share"
-                    android:tooltipText="@string/share"
-                    style="@style/ElevatedIconButton"
-                    app:icon="@drawable/ic_share"
-                    tools:targetApi="m" />
+            </com.google.android.material.appbar.CollapsingToolbarLayout>
 
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/notification_bell"
-                    android:tooltipText="@string/notifications"
-                    style="@style/ElevatedIconButton"
-                    app:icon="@drawable/ic_notification"
-                    tools:targetApi="m" />
+        </com.google.android.material.appbar.AppBarLayout>
 
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/channel_subscribe"
-                    style="@style/Widget.Material3.Button.ElevatedButton"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:drawableTint="?android:attr/textColorPrimary"
-                    android:stateListAnimator="@null"
-                    android:text="@string/subscribe"
-                    android:textColor="?android:attr/textColorPrimary"
-                    android:textSize="12sp"
-                    app:cornerRadius="20dp"
-                    app:elevation="20dp"
-                    tools:targetApi="m" />
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/channel_recView"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
-            </LinearLayout>
-
-            <com.github.libretube.ui.views.ExpandableTextView
-                android:id="@+id/channel_description"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginHorizontal="5dp"
-                android:autoLink="web"
-                android:padding="10dp" />
-
-            <HorizontalScrollView
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:paddingHorizontal="10dp"
-                android:scrollbars="none">
-
-                <com.google.android.material.chip.ChipGroup
-                    android:id="@+id/tab_chips"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    app:checkedChip="@+id/videos"
-                    app:selectionRequired="true"
-                    app:singleLine="true"
-                    app:singleSelection="true">
-
-                    <com.google.android.material.chip.Chip
-                        android:id="@id/videos"
-                        style="@style/channelChip"
-                        android:text="@string/videos"
-                        android:visibility="visible" />
-
-                    <com.google.android.material.chip.Chip
-                        android:id="@+id/shorts"
-                        style="@style/channelChip"
-                        android:text="@string/yt_shorts" />
-
-                    <com.google.android.material.chip.Chip
-                        android:id="@+id/livestreams"
-                        style="@style/channelChip"
-                        android:text="@string/livestreams" />
-
-                    <com.google.android.material.chip.Chip
-                        android:id="@+id/playlists"
-                        style="@style/channelChip"
-                        android:text="@string/playlists" />
-
-                    <com.google.android.material.chip.Chip
-                        android:id="@+id/channels"
-                        style="@style/channelChip"
-                        android:text="@string/channels" />
-
-                </com.google.android.material.chip.ChipGroup>
-
-            </HorizontalScrollView>
-
-            <RelativeLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:descendantFocusability="blocksDescendants">
-
-                <androidx.recyclerview.widget.RecyclerView
-                    android:id="@+id/channel_recView"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:nestedScrollingEnabled="false" />
-
-            </RelativeLayout>
-        </LinearLayout>
-    </ScrollView>
+    </androidx.coordinatorlayout.widget.CoordinatorLayout>
 </com.github.libretube.ui.views.CustomSwipeToRefresh>

From 277ad0d62ddad3db020e6861757eac33d9b71941 Mon Sep 17 00:00:00 2001
From: Ankur <ankurmbhat@gmail.com>
Date: Tue, 6 Feb 2024 17:15:29 -0800
Subject: [PATCH 2/5] Fix [ChannelFragment]: swipe refresh only at top of
 scroll

Implemented listeners to provide distinction between scrolling upward and swiping to refresh layout. When a user scrolls up, the refresh layout is only triggered once they are at the top of the scroll.
---
 .../github/libretube/ui/fragments/ChannelFragment.kt | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
index eeee9f711..0c6aa7071 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
@@ -59,6 +59,8 @@ class ChannelFragment : DynamicLayoutManagerFragment() {
     private var nextPages = Array<String?>(5) { null }
     private var searchChannelAdapter: SearchChannelAdapter? = null
 
+    private var isAppBarFullyExpanded: Boolean = true
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         channelName = args.channelName
@@ -86,6 +88,16 @@ class ChannelFragment : DynamicLayoutManagerFragment() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
+        // Check if the AppBarLayout is fully expanded
+        binding.channelAppBar.addOnOffsetChangedListener { _, verticalOffset ->
+            isAppBarFullyExpanded = verticalOffset == 0
+        }
+
+        // Determine if the child can scroll up
+        binding.channelRefresh.setOnChildScrollUpCallback { _, _ ->
+            !isAppBarFullyExpanded
+        }
+
         binding.channelRefresh.setOnRefreshListener {
             fetchChannel()
         }

From b6986996797d52af7f70c42e1d4741ba7af832c2 Mon Sep 17 00:00:00 2001
From: Ankur <ankurmbhat@gmail.com>
Date: Tue, 6 Feb 2024 20:22:50 -0800
Subject: [PATCH 3/5] Fix [PlaylistFragment]: resolve stuttering at bottom of
 scroll

-Removed ScrollView. RecyclerView itself handles scrolling, nesting it inside a ScrollView is possibly leading to conflicting scrolling behavior effecting performance(i.e stuttering when scrolling at bottom and updating list with new data items).

-Used AppBarLayout and CollapsingToolbarLayout as containers for content(image etc) above list of video items. Together with CoordinatorLayout, these components streamline scrolling behavior and UI interactions with each other and RecyclerView.
---
 .../ui/fragments/PlaylistFragment.kt          |   6 +-
 app/src/main/res/layout/fragment_playlist.xml | 247 +++++++++---------
 2 files changed, 129 insertions(+), 124 deletions(-)

diff --git a/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt
index e351e99cf..762d558df 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt
@@ -123,7 +123,6 @@ class PlaylistFragment : DynamicLayoutManagerFragment() {
     }
 
     private fun fetchPlaylist() {
-        binding.playlistScrollview.isGone = true
         lifecycleScope.launch {
             val response = try {
                 withContext(Dispatchers.IO) {
@@ -136,7 +135,6 @@ class PlaylistFragment : DynamicLayoutManagerFragment() {
             val binding = _binding ?: return@launch
 
             playlistFeed = response.relatedStreams.toMutableList()
-            binding.playlistScrollview.isVisible = true
             nextPage = response.nextpage
             playlistName = response.name
             isLoading = false
@@ -312,8 +310,8 @@ class PlaylistFragment : DynamicLayoutManagerFragment() {
             }
         })
 
-        binding.playlistScrollview.viewTreeObserver.addOnScrollChangedListener {
-            if (_binding?.playlistScrollview?.canScrollVertically(1) == false &&
+        binding.playlistRecView.viewTreeObserver.addOnScrollChangedListener {
+            if (_binding?.playlistRecView?.canScrollVertically(1) == false &&
                 !isLoading
             ) {
                 // append more playlists to the recycler view
diff --git a/app/src/main/res/layout/fragment_playlist.xml b/app/src/main/res/layout/fragment_playlist.xml
index 630c993fa..fcebef61f 100644
--- a/app/src/main/res/layout/fragment_playlist.xml
+++ b/app/src/main/res/layout/fragment_playlist.xml
@@ -1,157 +1,164 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".ui.fragments.PlaylistFragment">
 
-    <ProgressBar
-        android:id="@+id/playlist_progress"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_centerHorizontal="true"
-        android:layout_centerVertical="true"
-        android:visibility="gone" />
 
-    <ScrollView
-        android:id="@+id/playlist_scrollview"
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/playlist_recView"
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:clipToPadding="false"
+        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
-        <LinearLayout
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/playlist_app_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <com.google.android.material.appbar.CollapsingToolbarLayout
+            android:id="@+id/playlist_collapsing_tb"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="vertical">
-
-            <com.google.android.material.imageview.ShapeableImageView
-                android:id="@+id/thumbnail"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginHorizontal="20dp"
-                android:layout_marginVertical="10dp"
-                android:adjustViewBounds="true"
-                android:scaleType="fitCenter"
-                app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Small"
-                tools:src="@tools:sample/backgrounds/scenic" />
+            app:layout_scrollFlags="scroll"
+            app:titleCollapseMode="scale">
 
             <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="8dp"
-                android:orientation="horizontal">
+                android:orientation="vertical">
 
-                <com.github.libretube.ui.views.ExpandableTextView
-                    android:id="@+id/playlist_name"
-                    android:layout_width="0dp"
+                <com.google.android.material.imageview.ShapeableImageView
+                    android:id="@+id/thumbnail"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginStart="10dp"
-                    android:layout_weight="1"
-                    android:paddingHorizontal="5dp"
-                    android:paddingVertical="2dp"
-                    android:textSize="20sp"
-                    android:textStyle="bold" />
+                    android:layout_marginHorizontal="20dp"
+                    android:layout_marginVertical="10dp"
+                    android:adjustViewBounds="true"
+                    android:scaleType="fitCenter"
+                    app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Small"
+                    tools:src="@tools:sample/backgrounds/scenic" />
 
                 <LinearLayout
-                    android:id="@+id/sortContainer"
-                    android:layout_width="wrap_content"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:layout_marginEnd="8dp"
-                    android:background="@drawable/rounded_ripple"
-                    android:padding="5dp"
-                    android:visibility="gone"
-                    tools:visibility="visible">
+                    android:layout_marginTop="8dp"
+                    android:orientation="horizontal">
 
-                    <TextView
-                        android:id="@+id/sortTV"
+                    <com.github.libretube.ui.views.ExpandableTextView
+                        android:id="@+id/playlist_name"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="10dp"
+                        android:layout_weight="1"
+                        android:paddingHorizontal="5dp"
+                        android:paddingVertical="2dp"
+                        android:textSize="20sp"
+                        android:textStyle="bold" />
+
+                    <LinearLayout
+                        android:id="@+id/sortContainer"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:layout_marginEnd="5dp"
-                        tools:text="@string/most_recent" />
+                        android:layout_gravity="center"
+                        android:layout_marginEnd="8dp"
+                        android:background="@drawable/rounded_ripple"
+                        android:padding="5dp"
+                        android:visibility="gone"
+                        tools:visibility="visible">
+
+                        <TextView
+                            android:id="@+id/sortTV"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginEnd="5dp"
+                            tools:text="@string/most_recent" />
+
+                        <ImageView
+                            android:layout_width="20dp"
+                            android:layout_height="20dp"
+                            android:layout_gravity="center"
+                            android:src="@drawable/ic_sort" />
+
+                    </LinearLayout>
 
                     <ImageView
+                        android:id="@+id/optionsMenu"
                         android:layout_width="20dp"
                         android:layout_height="20dp"
                         android:layout_gravity="center"
-                        android:src="@drawable/ic_sort" />
+                        android:layout_marginEnd="20dp"
+                        android:background="?selectableItemBackgroundBorderless"
+                        android:src="@drawable/ic_three_dots" />
 
                 </LinearLayout>
 
-                <ImageView
-                    android:id="@+id/optionsMenu"
-                    android:layout_width="20dp"
-                    android:layout_height="20dp"
-                    android:layout_gravity="center"
-                    android:layout_marginEnd="20dp"
-                    android:background="?selectableItemBackgroundBorderless"
-                    android:src="@drawable/ic_three_dots" />
-
-            </LinearLayout>
-
-            <TextView
-                android:id="@+id/playlistInfo"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:paddingHorizontal="15dp"
-                android:paddingBottom="5dp"
-                android:textStyle="bold" />
-
-            <com.github.libretube.ui.views.ExpandableTextView
-                android:id="@+id/playlistDescription"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginHorizontal="5dp"
-                android:autoLink="web"
-                android:paddingHorizontal="10dp"
-                android:paddingTop="5dp"
-                android:paddingBottom="10dp" />
-
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginVertical="10dp"
-                android:orientation="horizontal">
-
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/play_all"
-                    style="@style/Widget.Material3.Button.OutlinedButton"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_marginHorizontal="10dp"
-                    android:layout_weight="1"
-                    android:maxLines="1"
-                    android:text="@string/play_all"
-                    app:icon="@drawable/ic_playlist" />
-
-                <com.google.android.material.button.MaterialButton
-                    android:id="@+id/bookmark"
-                    style="@style/Widget.Material3.Button"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_marginHorizontal="10dp"
-                    android:layout_weight="1"
-                    android:maxLines="1"
-                    android:text="@string/bookmark"
-                    app:icon="@drawable/ic_bookmark_outlined" />
-
-            </LinearLayout>
-
-            <RelativeLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:descendantFocusability="blocksDescendants">
-
-                <androidx.recyclerview.widget.RecyclerView
-                    android:id="@+id/playlist_recView"
+                <TextView
+                    android:id="@+id/playlistInfo"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:clipToPadding="false"
-                    android:nestedScrollingEnabled="false" />
-            </RelativeLayout>
+                    android:paddingHorizontal="15dp"
+                    android:paddingBottom="5dp"
+                    android:textStyle="bold" />
 
-        </LinearLayout>
+                <com.github.libretube.ui.views.ExpandableTextView
+                    android:id="@+id/playlistDescription"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginHorizontal="5dp"
+                    android:autoLink="web"
+                    android:paddingHorizontal="10dp"
+                    android:paddingTop="5dp"
+                    android:paddingBottom="10dp" />
 
-    </ScrollView>
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginVertical="10dp"
+                    android:orientation="horizontal">
 
-</RelativeLayout>
\ No newline at end of file
+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/play_all"
+                        style="@style/Widget.Material3.Button.OutlinedButton"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="10dp"
+                        android:layout_weight="1"
+                        android:maxLines="1"
+                        android:text="@string/play_all"
+                        app:icon="@drawable/ic_playlist" />
+
+                    <com.google.android.material.button.MaterialButton
+                        android:id="@+id/bookmark"
+                        style="@style/Widget.Material3.Button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="10dp"
+                        android:layout_weight="1"
+                        android:maxLines="1"
+                        android:text="@string/bookmark"
+                        app:icon="@drawable/ic_bookmark_outlined" />
+
+                </LinearLayout>
+
+
+            </LinearLayout>
+
+            <ProgressBar
+                android:id="@+id/playlist_progress"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_centerHorizontal="true"
+                android:layout_centerVertical="true"
+                android:visibility="gone" />
+
+        </com.google.android.material.appbar.CollapsingToolbarLayout>
+
+
+    </com.google.android.material.appbar.AppBarLayout>
+
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file

From 0d7750528577542451593eed45a8c9eb9d5c6437 Mon Sep 17 00:00:00 2001
From: Ankur <ankurmbhat@gmail.com>
Date: Mon, 12 Feb 2024 18:16:21 -0800
Subject: [PATCH 4/5] Fix [ChannelFragment]: main layout becomes visible after
 data fetched

---
 .../java/com/github/libretube/ui/fragments/ChannelFragment.kt | 2 ++
 app/src/main/res/layout/fragment_channel.xml                  | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
index 0c6aa7071..0cd9dcafb 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/ChannelFragment.kt
@@ -211,6 +211,8 @@ class ChannelFragment : DynamicLayoutManagerFragment() {
         isLoading = false
         binding.channelRefresh.isRefreshing = false
 
+        binding.channelCoordinator.isVisible = true
+
         binding.channelName.text = response.name
         if (response.verified) {
             binding.channelName
diff --git a/app/src/main/res/layout/fragment_channel.xml b/app/src/main/res/layout/fragment_channel.xml
index c033d726c..94d9665aa 100644
--- a/app/src/main/res/layout/fragment_channel.xml
+++ b/app/src/main/res/layout/fragment_channel.xml
@@ -7,8 +7,10 @@
     android:layout_height="match_parent">
 
     <androidx.coordinatorlayout.widget.CoordinatorLayout
+        android:id="@+id/channel_coordinator"
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:visibility="gone">
 
         <com.google.android.material.appbar.AppBarLayout
             android:id="@+id/channel_app_bar"

From 6f471163ce9f9940fb8ddb68ca46d54ff7d46307 Mon Sep 17 00:00:00 2001
From: Ankur <ankurmbhat@gmail.com>
Date: Tue, 20 Feb 2024 14:59:32 -0800
Subject: [PATCH 5/5] Fix [PlaylistFragment]: main layout becomes visible after
 data fetched

---
 .../libretube/ui/fragments/PlaylistFragment.kt  |  2 ++
 app/src/main/res/layout/fragment_playlist.xml   | 17 +++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt b/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt
index 762d558df..331516dc2 100644
--- a/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt
+++ b/app/src/main/java/com/github/libretube/ui/fragments/PlaylistFragment.kt
@@ -140,6 +140,8 @@ class PlaylistFragment : DynamicLayoutManagerFragment() {
             isLoading = false
             ImageHelper.loadImage(response.thumbnailUrl, binding.thumbnail)
             binding.playlistProgress.isGone = true
+            binding.playlistAppBar.isVisible = true
+            binding.playlistRecView.isVisible = true
             binding.playlistName.text = response.name
 
             binding.playlistInfo.text = getChannelAndVideoString(response, response.videos)
diff --git a/app/src/main/res/layout/fragment_playlist.xml b/app/src/main/res/layout/fragment_playlist.xml
index fcebef61f..e0aa04c50 100644
--- a/app/src/main/res/layout/fragment_playlist.xml
+++ b/app/src/main/res/layout/fragment_playlist.xml
@@ -6,18 +6,26 @@
     android:layout_height="match_parent"
     tools:context=".ui.fragments.PlaylistFragment">
 
+    <ProgressBar
+        android:id="@+id/playlist_progress"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        android:layout_gravity="center" />
 
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/playlist_recView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:clipToPadding="false"
+        android:visibility="gone"
         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
     <com.google.android.material.appbar.AppBarLayout
         android:id="@+id/playlist_app_bar"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="wrap_content"
+        android:visibility="gone">
 
         <com.google.android.material.appbar.CollapsingToolbarLayout
             android:id="@+id/playlist_collapsing_tb"
@@ -147,13 +155,6 @@
 
             </LinearLayout>
 
-            <ProgressBar
-                android:id="@+id/playlist_progress"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_centerHorizontal="true"
-                android:layout_centerVertical="true"
-                android:visibility="gone" />
 
         </com.google.android.material.appbar.CollapsingToolbarLayout>