Show sync progress also in room detail screen (#403)

CHANGES.md

@@ -14,7 +14,7 @@ Improvements:
  - Add "View Edit History" item in the message bottom sheet (#401)
 
 Other changes:
- -
+ - Show sync progress also in room detail screen (#403)
 
 Bugfix:
  - Edited message: link confusion when (edited) appears in body (#398)

vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailFragment.kt

@@ -65,6 +65,7 @@ import im.vector.matrix.android.api.session.room.send.SendState
 import im.vector.matrix.android.api.session.room.timeline.TimelineEvent
 import im.vector.matrix.android.api.session.room.timeline.getLastMessageContent
 import im.vector.matrix.android.api.session.room.timeline.getTextEditableContent
+import im.vector.matrix.android.api.session.sync.SyncState
 import im.vector.matrix.android.api.session.user.model.User
 import im.vector.riotx.R
 import im.vector.riotx.core.di.ScreenComponent
@@ -247,6 +248,14 @@ class RoomDetailFragment :
                 is SendMode.REPLY -> enterSpecialMode(mode.timelineEvent, R.drawable.ic_reply, false)
             }
         }
+
+        roomDetailViewModel.selectSubscribe(RoomDetailViewState::syncState) { syncState ->
+            syncProgressBar.visibility = when (syncState) {
+                is SyncState.RUNNING -> if (syncState.afterPause) View.VISIBLE else View.GONE
+                else                 -> View.GONE
+            }
+            syncProgressBarWrap.visibility = syncProgressBar.visibility
+        }
     }
 
     private fun setupNotificationView() {

vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailViewModel.kt

@@ -103,6 +103,7 @@ class RoomDetailViewModel @AssistedInject constructor(@Assisted initialState: Ro
     }
 
     init {
+        observeSyncState()
         observeRoomSummary()
         observeEventDisplayedActions()
         observeSummaryState()
@@ -631,6 +632,17 @@ class RoomDetailViewModel @AssistedInject constructor(@Assisted initialState: Ro
                 .disposeOnClear()
     }
 
+    private fun observeSyncState() {
+        session.rx()
+                .liveSyncState()
+                .subscribe { syncState ->
+                    setState {
+                        copy(syncState = syncState)
+                    }
+                }
+                .disposeOnClear()
+    }
+
     private fun observeRoomSummary() {
         room.rx().liveRoomSummary()
                 .execute { async ->

vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailViewState.kt

@@ -21,9 +21,9 @@ import com.airbnb.mvrx.MvRxState
 import com.airbnb.mvrx.Uninitialized
 import im.vector.matrix.android.api.session.events.model.Event
 import im.vector.matrix.android.api.session.room.model.RoomSummary
-import im.vector.matrix.android.api.session.room.model.tombstone.RoomTombstoneContent
 import im.vector.matrix.android.api.session.room.timeline.Timeline
 import im.vector.matrix.android.api.session.room.timeline.TimelineEvent
+import im.vector.matrix.android.api.session.sync.SyncState
 import im.vector.matrix.android.api.session.user.model.User
 
 /**
@@ -50,7 +50,8 @@ data class RoomDetailViewState(
         val sendMode: SendMode = SendMode.REGULAR,
         val isEncrypted: Boolean = false,
         val tombstoneEvent: Event? = null,
-        val tombstoneEventHandling: Async<String> = Uninitialized
+        val tombstoneEventHandling: Async<String> = Uninitialized,
+        val syncState: SyncState = SyncState.IDLE
 ) : MvRxState {
 
     constructor(args: RoomDetailArgs) : this(roomId = args.roomId, eventId = args.eventId)

vector/src/main/res/layout/fragment_room_detail.xml

@@ -11,8 +11,8 @@
         style="@style/VectorToolbarStyle"
         android:layout_width="0dp"
         android:layout_height="?actionBarSize"
-        android:transitionName="toolbar"
         android:elevation="4dp"
+        android:transitionName="toolbar"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">
@@ -71,6 +71,29 @@
 
     </androidx.appcompat.widget.Toolbar>
 
+    <!-- Trick to remove surrounding padding (clip frome wrapping frame) -->
+    <FrameLayout
+        android:id="@+id/syncProgressBarWrap"
+        android:layout_width="match_parent"
+        android:layout_height="3dp"
+        android:visibility="gone"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/roomToolbar"
+        tools:visibility="visible">
+
+        <ProgressBar
+            android:id="@+id/syncProgressBar"
+            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
+            android:layout_width="match_parent"
+            android:layout_height="14dp"
+            android:layout_gravity="center"
+            android:background="?riotx_header_panel_background"
+            android:indeterminate="true"
+            android:visibility="gone"
+            tools:visibility="visible" />
+    </FrameLayout>
+
     <com.airbnb.epoxy.EpoxyRecyclerView
         android:id="@+id/recyclerView"
         android:layout_width="0dp"
@@ -78,7 +101,7 @@
         app:layout_constraintBottom_toTopOf="@+id/recyclerViewBarrier"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/roomToolbar"
+        app:layout_constraintTop_toBottomOf="@id/syncProgressBarWrap"
         tools:listitem="@layout/item_timeline_event_base" />
 
     <androidx.constraintlayout.widget.Barrier