Fix #5170 [Feature Request]: Display some kind of loading animation/graphic when topics are loading in Home Page

app/src/main/java/org/oppia/android/app/home/HomeViewModel.kt

@@ -1,6 +1,7 @@
 package org.oppia.android.app.home
 
 import androidx.appcompat.app.AppCompatActivity
+import androidx.databinding.ObservableField
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.Transformations
@@ -58,6 +59,15 @@ class HomeViewModel(
     R.integer.promoted_story_list_limit
   )
 
+/**
+   * A Boolean property indicating the visibility state of a progress bar.
+   * This property is used to control the visibility of a progress bar in a user interface.
+   * When set to true, the progress bar is made visible, indicating that an ongoing task
+   * or operation is in progress or pending or failed. When set to false, the progress bar is hidden, indicating
+   * that the operation has completed.
+   */
+  val isProgressBarVisible = ObservableField(true)
+
   private val profileDataProvider: DataProvider<Profile> by lazy {
     profileManagementController.getProfile(profileId)
   }
@@ -111,7 +121,10 @@ class HomeViewModel(
           listOf()
         }
         is AsyncResult.Pending -> listOf()
-        is AsyncResult.Success -> itemListResult.value
+        is AsyncResult.Success -> {
+          isProgressBarVisible.set(false)
+          itemListResult.value
+        }
       }
     }
   }

app/src/main/res/layout/home_fragment.xml

@@ -3,9 +3,8 @@
   xmlns:app="http://schemas.android.com/apk/res-auto">
 
   <data>
-
     <import type="org.oppia.android.R" />
-
+    <import type="android.view.View" />
     <variable
       name="viewModel"
       type="org.oppia.android.app.home.HomeViewModel" />
@@ -17,6 +16,15 @@
     android:background="@color/component_color_shared_screen_primary_background_color"
     android:gravity="center">
 
+    <ProgressBar
+      android:id="@+id/home_fragment_progress_bar"
+      android:layout_width="60dp"
+      android:layout_height="60dp"
+      android:layout_gravity="center"
+      android:indeterminateTint="@color/component_color_home_activity_progressbar_color"
+      android:visibility="@{viewModel.isProgressBarVisible?View.VISIBLE:View.GONE}"
+      />
+
     <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/home_recycler_view"
       android:layout_width="match_parent"

app/src/main/res/values/component_colors.xml

@@ -223,6 +223,7 @@
   <!-- Home Activity -->
   <color name="component_color_home_activity_view_all_text_color">@color/color_palette_view_all_text_color</color>
   <color name="component_color_home_activity_layout_greeting_text_line_color">@color/color_palette_layout_below_greeting_text_color</color>
+  <color name="component_color_home_activity_progressbar_color">@color/color_palette_progress_bar_solid_color</color>
   <!-- CONFETTI COLORS -->
   <color name="component_color_confetti_red_color">@color/color_palette_confetti_red_color</color>
   <color name="component_color_confetti_yellow_color">@color/color_palette_confetti_yellow_color</color>

app/src/sharedTest/java/org/oppia/android/app/home/HomeActivityTest.kt

@@ -246,6 +246,33 @@ class HomeActivityTest {
     assertThat(screenName).isEqualTo(ScreenName.HOME_ACTIVITY)
   }
 
+  @Test
+  fun testHomeActivity_loadingItemsPending_progressbarIsDisplayed() {
+    fakeOppiaClock.setFakeTimeMode(FakeOppiaClock.FakeTimeMode.MODE_FIXED_FAKE_TIME)
+    launch<HomeActivity>(createHomeActivityIntent(internalProfileId)).use {
+      onView(withId(R.id.home_fragment_progress_bar)).check(
+        matches(
+          isDisplayed()
+        )
+      )
+    }
+  }
+
+  @Test
+  fun testHomeActivity_loadingItemsSuccess_checkProgressbarIsNotDisplayed() {
+    fakeOppiaClock.setFakeTimeMode(FakeOppiaClock.FakeTimeMode.MODE_FIXED_FAKE_TIME)
+    launch<HomeActivity>(createHomeActivityIntent(internalProfileId)).use {
+      testCoroutineDispatchers.runCurrent()
+      onView(withId(R.id.home_fragment_progress_bar)).check(
+        matches(
+          not(
+            isDisplayed()
+          )
+        )
+      )
+    }
+  }
+
   @Test
   fun testHomeActivity_hasCorrectActivityLabel() {
     launch(HomeActivity::class.java).use { scenario ->