Add skelton view while loading

This reduces the flicker while loading Sitemaps and the notification list.

Signed-off-by: mueller-ma <[email protected]>

mobile/build.gradle

@@ -174,7 +174,8 @@ dependencies {
     implementation "com.github.QuadFlask:colorpicker:0.0.15"
     implementation "com.caverock:androidsvg-aar:1.4"
     implementation "com.github.AppIntro:AppIntro:6.3.1"
-    implementation 'com.github.chrisbanes:PhotoView:2.3.0'
+    implementation "com.github.chrisbanes:PhotoView:2.3.0"
+    implementation "com.faltenreich:skeletonlayout:5.0.0"
     // MapView support
     fullImplementation "com.google.android.gms:play-services-maps:18.2.0"
     fossImplementation "org.osmdroid:osmdroid-android:6.1.18"

mobile/src/main/java/org/openhab/habdroid/ui/CloudNotificationListFragment.kt

@@ -21,13 +21,15 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.Button
 import android.widget.ImageView
+import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.core.os.bundleOf
 import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
+import com.faltenreich.skeletonlayout.SkeletonLayout
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.launch
 import org.json.JSONArray
@@ -50,6 +52,7 @@ import org.openhab.habdroid.util.map
  */
 class CloudNotificationListFragment : Fragment(), View.OnClickListener, SwipeRefreshLayout.OnRefreshListener {
     lateinit var recyclerView: RecyclerView
+    private lateinit var skeleton: SkeletonLayout
     private lateinit var swipeLayout: SwipeRefreshLayout
     private lateinit var retryButton: Button
     private lateinit var emptyView: View
@@ -71,6 +74,13 @@ class CloudNotificationListFragment : Fragment(), View.OnClickListener, SwipeRef
         emptyView = view.findViewById(android.R.id.empty)
         emptyMessage = view.findViewById(R.id.empty_message)
         emptyWatermark = view.findViewById(R.id.watermark)
+        skeleton = view.findViewById(R.id.skeletonLayout)
+        view.findViewById<LinearLayout>(R.id.skeletonList).apply {
+            repeat(10) {
+                addView(inflater.inflate(R.layout.notificationlist_item, null))
+            }
+        }
+        skeleton.showSkeleton()
 
         swipeLayout = view.findViewById(R.id.swipe_container)
         swipeLayout.setOnRefreshListener(this)
@@ -106,6 +116,7 @@ class CloudNotificationListFragment : Fragment(), View.OnClickListener, SwipeRef
 
     override fun onRefresh() {
         Log.d(TAG, "onRefresh()")
+        swipeLayout.isRefreshing = false
         loadNotifications(true)
     }
 
@@ -172,7 +183,7 @@ class CloudNotificationListFragment : Fragment(), View.OnClickListener, SwipeRef
         val showEmpty = !loading && (adapter.itemCount == 0 || loadError)
         recyclerView.isVisible = !showEmpty
         emptyView.isVisible = showEmpty
-        swipeLayout.isRefreshing = loading
+        skeleton.isVisible = loading
         emptyMessage.setText(
             if (loadError) R.string.notification_list_error else R.string.notification_list_empty
         )

mobile/src/main/java/org/openhab/habdroid/ui/activity/ContentController.kt

@@ -41,6 +41,7 @@ import androidx.fragment.app.FragmentManager
 import androidx.fragment.app.FragmentManager.FragmentLifecycleCallbacks
 import androidx.fragment.app.commit
 import androidx.fragment.app.commitNow
+import com.faltenreich.skeletonlayout.SkeletonLayout
 import java.util.Stack
 import org.openhab.habdroid.R
 import org.openhab.habdroid.core.OpenHabApplication
@@ -793,7 +794,9 @@ abstract class ContentController protected constructor(private val activity: Mai
             descriptionText.text = arguments.getCharSequence(KEY_MESSAGE)
             descriptionText.isVisible = !descriptionText.text.isNullOrEmpty()
 
-            view.findViewById<View>(R.id.progress).isVisible = arguments.getBoolean(KEY_PROGRESS)
+            val skeleton = view.findViewById<SkeletonLayout>(R.id.skeletonLayout)
+            skeleton.isVisible = arguments.getBoolean(KEY_PROGRESS)
+            skeleton.showSkeleton()
 
             val watermark = view.findViewById<ImageView>(R.id.image)
 

mobile/src/main/res/layout/fragment_notificationlist.xml

@@ -54,6 +54,18 @@
 
         </LinearLayout>
 
+        <com.faltenreich.skeletonlayout.SkeletonLayout
+            android:id="@+id/skeletonLayout"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+
+            <LinearLayout
+                android:id="@+id/skeletonList"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="vertical" />
+        </com.faltenreich.skeletonlayout.SkeletonLayout>
+
     </FrameLayout>
 
 </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

mobile/src/main/res/layout/fragment_status.xml

@@ -34,13 +34,39 @@
             android:textColor="?colorOnSurfaceVariant"
             tools:text="Some status message" />
 
-        <ProgressBar
-            android:id="@+id/progress"
-            style="?attr/indeterminateProgressStyle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_margin="8dp"
-            android:layout_gravity="center_horizontal" />
+        <com.faltenreich.skeletonlayout.SkeletonLayout
+            android:id="@+id/skeletonLayout"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="vertical">
+                <include layout="@layout/widgetlist_frameitem" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_frameitem" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_frameitem" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_frameitem" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+                <include layout="@layout/widgetlist_textitem_compact" />
+            </LinearLayout>
+
+
+        </com.faltenreich.skeletonlayout.SkeletonLayout>
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button1"