Fix #5170 [Feature Request]: Display some kind of loading animation/g…

…raphic when topics are loading in Home Page (#5167)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fix #5170. Added progressbar to the home fragment to
show loading.
<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [x] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

Light mode


https://github.com/oppia/oppia-android/assets/76042077/d7ac57cb-47e0-43a1-b80c-7c64eaa67ddd

Darkmode


https://github.com/oppia/oppia-android/assets/76042077/1a13dd22-df4d-4dbd-bd06-19882a123d98




<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-A11y-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing

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 ->