CMM-955 reader subscribe button unresponsive on quick tap (#22373)

* Adding a loading spinner to the recommended blogs subscribe button

* Fixing the loading wrong state

* Fixing it for the post details screen

* Fixing blog screen subscription as well

* detekt

* lint fix

* Using suspend function to iterate over cards

* Removing the withContext, but keeping the scope usage

* Some refactoring

* Adding tests

* Update WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderSiteHeaderView.java

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>

* Compile fix

* chore: trigger CI

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>

Author: 2 people

WordPress/src/main/java/org/wordpress/android/ui/reader/adapters/ReaderPostAdapter.java

@@ -348,8 +348,8 @@ private void renderTagHeader(
                 new FollowButtonUiState(
                         onFollowButtonClicked,
                         ReaderTagTable.isFollowedTagName(currentTag.getTagSlug()),
-                        isFollowButtonEnabled,
-                        true
+                        isFollowButtonEnabled, // isVisible
+                        false // isFollowActionRunning
                 )
         );
         tagHolder.onBind(uiState);

WordPress/src/main/java/org/wordpress/android/ui/reader/discover/ReaderCardUiState.kt

@@ -122,7 +122,7 @@ sealed class ReaderCardUiState {
             val description: String?,
             val iconUrl: String?,
             val isFollowed: Boolean,
-            val isFollowEnabled: Boolean,
+            val isFollowActionRunning: Boolean = false,
             val onItemClicked: (Long, Long, Boolean) -> Unit,
             val onFollowClicked: (ReaderRecommendedBlogUiState) -> Unit
         ) {

WordPress/src/main/java/org/wordpress/android/ui/reader/discover/ReaderDiscoverViewModel.kt

@@ -157,8 +157,11 @@ class ReaderDiscoverViewModel @Inject constructor(
                         emptyList()
                     }
 
+                    val newCards = convertCardsToUiStates(posts)
+                    val cardsWithPreservedState = preserveFollowActionRunningState(newCards)
+
                     _uiState.value = DiscoverUiState.ContentUiState(
-                        announcement + convertCardsToUiStates(posts),
+                        announcement + cardsWithPreservedState,
                         reloadProgressVisibility = false,
                         loadMoreProgressVisibility = false,
                     )
@@ -175,6 +178,39 @@ class ReaderDiscoverViewModel @Inject constructor(
         }
     }
 
+    private fun preserveFollowActionRunningState(newCards: List<ReaderCardUiState>): List<ReaderCardUiState> {
+        val currentUiState = _uiState.value as? DiscoverUiState.ContentUiState ?: return newCards
+
+        return newCards.map { card ->
+            if (card is ReaderCardUiState.ReaderRecommendedBlogsCardUiState) {
+                preserveBlogCardFollowState(card, currentUiState)
+            } else {
+                card
+            }
+        }
+    }
+
+    private fun preserveBlogCardFollowState(
+        card: ReaderCardUiState.ReaderRecommendedBlogsCardUiState,
+        currentUiState: DiscoverUiState.ContentUiState
+    ): ReaderCardUiState.ReaderRecommendedBlogsCardUiState {
+        val currentBlogs = currentUiState.cards
+            .filterIsInstance<ReaderCardUiState.ReaderRecommendedBlogsCardUiState>()
+            .flatMap { it.blogs }
+
+        val updatedBlogs = card.blogs.map { blog ->
+            val currentBlog = currentBlogs.find {
+                it.blogId == blog.blogId && it.feedId == blog.feedId
+            }
+            if (currentBlog?.isFollowActionRunning == true) {
+                blog.copy(isFollowActionRunning = true)
+            } else {
+                blog
+            }
+        }
+        return card.copy(blogs = updatedBlogs)
+    }
+
     private fun dismissAnnouncementCard() {
         readerAnnouncementHelper.dismissReaderAnnouncement()
         _uiState.value = (_uiState.value as? DiscoverUiState.ContentUiState)?.let { contentUiState ->
@@ -200,7 +236,10 @@ class ReaderDiscoverViewModel @Inject constructor(
                 for (j in mutableBlogs.indices) {
                     val blog = mutableBlogs[j]
                     if (blog.blogId == data.blogId && blog.feedId == data.feedId) {
-                        mutableBlogs[j] = blog.copy(isFollowed = data.following, isFollowEnabled = data.isChangeFinal)
+                        mutableBlogs[j] = blog.copy(
+                            isFollowed = data.following,
+                            isFollowActionRunning = !data.isChangeFinal
+                        )
                         hasChangedBlogs = true
                     }
                 }

WordPress/src/main/java/org/wordpress/android/ui/reader/discover/ReaderPostUiStateBuilder.kt

@@ -198,7 +198,6 @@ class ReaderPostUiStateBuilder @Inject constructor(
                     description = it.description.ifEmpty { null },
                     iconUrl = it.imageUrl,
                     isFollowed = it.isFollowing,
-                    isFollowEnabled = true,
                     onFollowClicked = onFollowClicked,
                     onItemClicked = onItemClicked
                 )

WordPress/src/main/java/org/wordpress/android/ui/reader/discover/viewholders/ReaderRecommendedBlogViewHolder.kt

@@ -1,5 +1,6 @@
 package org.wordpress.android.ui.reader.discover.viewholders
 
+import android.view.View
 import android.view.ViewGroup
 import androidx.recyclerview.widget.RecyclerView
 import org.wordpress.android.databinding.ReaderRecommendedBlogItemBinding
@@ -29,12 +30,16 @@ class ReaderRecommendedBlogViewHolder(
         uiState: ReaderRecommendedBlogUiState,
         binding: ReaderRecommendedBlogItemBinding
     ) {
-        with(binding.siteFollowButton) {
-            isEnabled = uiState.isFollowEnabled
-            setIsFollowed(uiState.isFollowed)
-            contentDescription = context.getString(uiState.followContentDescription.stringRes)
-            setOnClickListener {
-                uiState.onFollowClicked(uiState)
+        with(binding) {
+            siteFollowProgress.visibility = if (uiState.isFollowActionRunning) View.VISIBLE else View.GONE
+            siteFollowButton.apply {
+                setIsLoading(uiState.isFollowActionRunning)
+                isEnabled = !uiState.isFollowActionRunning
+                setIsFollowed(uiState.isFollowed)
+                contentDescription = context.getString(uiState.followContentDescription.stringRes)
+                setOnClickListener {
+                    uiState.onFollowClicked(uiState)
+                }
             }
         }
     }

WordPress/src/main/java/org/wordpress/android/ui/reader/viewmodels/ReaderPostDetailViewModel.kt

@@ -9,6 +9,7 @@ import androidx.lifecycle.viewModelScope
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.Job
+import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import org.greenrobot.eventbus.Subscribe
 import org.greenrobot.eventbus.ThreadMode.MAIN
@@ -255,7 +256,7 @@ class ReaderPostDetailViewModel @Inject constructor(
                     updateFollowButtonUiState(
                         currentUiState = currentUiState,
                         isFollowed = post.isFollowedByCurrentUser,
-                        isFollowEnabled = data.isChangeFinal
+                        isFollowActionRunning = !data.isChangeFinal
                     )
                 }
             }
@@ -529,7 +530,9 @@ class ReaderPostDetailViewModel @Inject constructor(
     }
 
     fun onUpdatePost(post: ReaderPost) {
-        _uiState.value = convertPostToUiState(post)
+        viewModelScope.launch {
+            _uiState.value = convertPostToUiState(post)
+        }
     }
 
     fun onTagItemClicked(tagSlug: String) {
@@ -608,11 +611,31 @@ class ReaderPostDetailViewModel @Inject constructor(
     private fun convertPostToUiState(
         post: ReaderPost
     ): ReaderPostDetailsUiState {
-        return postDetailUiStateBuilder.mapPostToUiState(
+        val newUiState = postDetailUiStateBuilder.mapPostToUiState(
             post = post,
             onButtonClicked = this@ReaderPostDetailViewModel::onButtonClicked,
             onHeaderAction = { action -> onHeaderAction(post, action) },
         )
+        return preserveFollowActionRunningState(newUiState)
+    }
+
+    private fun preserveFollowActionRunningState(
+        newUiState: ReaderPostDetailsUiState
+    ): ReaderPostDetailsUiState {
+        val currentUiState = _uiState.value as? ReaderPostDetailsUiState ?: return newUiState
+        val currentFollowButtonState = currentUiState.headerUiState.followButtonUiState
+
+        return if (currentFollowButtonState.isFollowActionRunning) {
+            val updatedFollowButtonUiState = newUiState.headerUiState.followButtonUiState.copy(
+                isFollowActionRunning = true
+            )
+            val updatedHeaderUiState = newUiState.headerUiState.copy(
+                followButtonUiState = updatedFollowButtonUiState
+            )
+            newUiState.copy(headerUiState = updatedHeaderUiState)
+        } else {
+            newUiState
+        }
     }
 
     private fun convertRelatedPostsToUiState(
@@ -637,12 +660,15 @@ class ReaderPostDetailViewModel @Inject constructor(
     private fun updateFollowButtonUiState(
         currentUiState: ReaderPostDetailsUiState,
         isFollowed: Boolean,
-        isFollowEnabled: Boolean,
+        isFollowActionRunning: Boolean,
     ) {
         val updatedFollowButtonUiState = currentUiState
             .headerUiState
             .followButtonUiState
-            .copy(isFollowed = isFollowed, isEnabled = isFollowEnabled)
+            .copy(
+                isFollowed = isFollowed,
+                isFollowActionRunning = isFollowActionRunning
+            )
 
         val updatedHeaderUiState = currentUiState
             .headerUiState

WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderFollowButton.kt

@@ -24,6 +24,7 @@ class ReaderFollowButton @JvmOverloads constructor(
 ) : MaterialButton(context, attrs, defStyleAttr) {
     private var isFollowed = false
     private var showCaption = false
+    private var isLoading = false
 
     init {
         initView(context, attrs)
@@ -58,6 +59,14 @@ class ReaderFollowButton @JvmOverloads constructor(
         setIsFollowed(isFollowed, true)
     }
 
+    fun setIsLoading(loading: Boolean) {
+        if (isLoading == loading) return
+        isLoading = loading
+        isEnabled = !loading
+    }
+
+    fun getIsLoading(): Boolean = isLoading
+
     @SuppressLint("Recycle")
     private fun setIsFollowed(isFollowed: Boolean, animateChanges: Boolean) {
         if (isFollowed == this.isFollowed && isSelected == isFollowed) {

WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderPostDetailHeaderView.kt

@@ -58,7 +58,7 @@ class ReaderPostDetailHeaderView @JvmOverloads constructor(
 
         uiHelpers.setTextOrHide(layoutBlogSection.blogSectionTextBlogName, uiState.blogSectionUiState.blogName)
 
-        headerFollowButton.update(uiState.followButtonUiState)
+        updateFollowButton(uiState.followButtonUiState)
 
         updateAvatars(uiState.blogSectionUiState)
         updateBlogSectionClick(uiState.blogSectionUiState)
@@ -113,11 +113,17 @@ class ReaderPostDetailHeaderView @JvmOverloads constructor(
         }
     }
 
-    private fun ReaderFollowButton.update(followButtonUiState: FollowButtonUiState) {
-        isEnabled = followButtonUiState.isEnabled
-        setVisible(followButtonUiState.isVisible)
-        setIsFollowed(followButtonUiState.isFollowed)
-        setOnClickListener { followButtonUiState.onFollowButtonClicked?.invoke() }
+    private fun ReaderPostDetailHeaderViewBinding.updateFollowButton(
+        followButtonUiState: FollowButtonUiState
+    ) {
+        headerFollowButtonContainer.setVisible(followButtonUiState.isVisible)
+        headerFollowProgress.setVisible(followButtonUiState.isFollowActionRunning)
+        headerFollowButton.apply {
+            setIsLoading(followButtonUiState.isFollowActionRunning)
+            isEnabled = !followButtonUiState.isFollowActionRunning
+            setIsFollowed(followButtonUiState.isFollowed)
+            setOnClickListener { followButtonUiState.onFollowButtonClicked?.invoke() }
+        }
     }
 
     private fun setAuthorAndDate(authorName: String?, dateLine: String) = with(binding.layoutBlogSection) {

WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderSiteHeaderView.java

@@ -10,8 +10,11 @@
 import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
+import android.widget.ProgressBar;
 import android.widget.TextView;
 
+import androidx.annotation.Nullable;
+
 import org.wordpress.android.R;
 import org.wordpress.android.WordPress;
 import org.wordpress.android.datasets.ReaderBlogTable;
@@ -55,6 +58,7 @@ public interface OnBlogInfoLoadedListener {
     private boolean mIsFeed;
 
     private ReaderFollowButton mFollowButton;
+    @Nullable private ProgressBar mFollowProgress;
     private ReaderBlog mBlogInfo;
     private OnBlogInfoLoadedListener mBlogInfoListener;
     private OnFollowListener mFollowListener;
@@ -84,6 +88,7 @@ public ReaderSiteHeaderView(Context context, AttributeSet attrs, int defStyleAtt
     private void initView(Context context) {
         final View view = inflate(context, R.layout.reader_site_header_view, this);
         mFollowButton = view.findViewById(R.id.follow_button);
+        mFollowProgress = view.findViewById(R.id.follow_button_progress);
         view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
     }
 
@@ -246,12 +251,17 @@ private void showBlavatarImage(ReaderBlog blogInfo, ImageView blavatarImg) {
                 PhotonUtils.getPhotonImageUrl(blogInfo.getImageUrl(), mBlavatarSz, mBlavatarSz, Quality.HIGH));
     }
 
+    private void setFollowButtonLoading(boolean isLoading) {
+        mFollowButton.setIsLoading(isLoading);
+        mFollowProgress.setVisibility(isLoading ? View.VISIBLE : View.GONE);
+    }
+
     private void toggleFollowStatus(final View followButton, final String source) {
         if (!NetworkUtils.checkConnection(getContext())) {
             return;
         }
-        // disable follow button until API call returns
-        mFollowButton.setEnabled(false);
+        // disable follow button and show loading indicator until API call returns
+        setFollowButtonLoading(true);
 
         final boolean isAskingToFollow;
         if (mIsFeed) {
@@ -278,7 +288,7 @@ private void toggleFollowStatus(final View followButton, final String source) {
             if (getContext() == null) {
                 return;
             }
-            mFollowButton.setEnabled(true);
+            setFollowButtonLoading(false);
             if (!succeeded) {
                 int errResId = isAskingToFollow ? R.string.reader_toast_err_unable_to_follow_blog
                         : R.string.reader_toast_err_unable_to_unfollow_blog;
@@ -310,6 +320,7 @@ private void toggleFollowStatus(final View followButton, final String source) {
         }
 
         if (!result) {
+            setFollowButtonLoading(false);
             mFollowButton.setIsFollowed(!isAskingToFollow);
         }
     }

WordPress/src/main/java/org/wordpress/android/ui/reader/views/ReaderTagHeaderView.kt

@@ -48,7 +48,7 @@ class ReaderTagHeaderView @JvmOverloads constructor(
         with(uiState.followButtonUiState) {
             val followButton = binding.followContainer.followButton
             followButton.setIsFollowed(isFollowed)
-            followButton.isEnabled = isEnabled
+            followButton.isEnabled = !isFollowActionRunning
             onFollowBtnClicked = onFollowButtonClicked
         }
     }