feat: skeleton ui구현

woowacourse-teams · Oct 21, 2024 · 04624c6 · 04624c6
1 parent 36fdc1a
commit 04624c6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 12 deletions.
diff --git a/...c/main/java/com/zzang/chongdae/presentation/view/offeringdetail/OfferingDetailFragment.kt b/...c/main/java/com/zzang/chongdae/presentation/view/offeringdetail/OfferingDetailFragment.kt
@@ -116,7 +116,8 @@ class OfferingDetailFragment : Fragment(), OnOfferingDeleteAlertClickListener {
 
         viewModel.showAlertEvent.observe(viewLifecycleOwner) {
             val alertBinding = DialogAlertBinding.inflate(layoutInflater, null, false)
-            alertBinding.tvDialogMessage.text = getString(R.string.offering_detail_participate_alert)
+            alertBinding.tvDialogMessage.text =
+                getString(R.string.offering_detail_participate_alert)
             alertBinding.listener = viewModel
 
             dialog.setContentView(alertBinding.root)
@@ -126,6 +127,10 @@ class OfferingDetailFragment : Fragment(), OnOfferingDeleteAlertClickListener {
         viewModel.alertCancelEvent.observe(viewLifecycleOwner) {
             dialog.dismiss()
         }
+
+        viewModel.loading.observe(viewLifecycleOwner) {
+            startShimmer(it)
+        }
     }
 
     override fun onClickConfirm() {
@@ -207,6 +212,20 @@ class OfferingDetailFragment : Fragment(), OnOfferingDeleteAlertClickListener {
         toast?.show()
     }
 
+    private fun startShimmer(isLoading: Boolean) {
+        if (isLoading) {
+            binding.sflOfferingDetail.startShimmer()
+            binding.sflOfferingDetail.visibility = View.VISIBLE
+            binding.svLayout.visibility = View.GONE
+            binding.btnParticipate.visibility = View.GONE
+            binding.btnMoveCommentDetail.visibility = View.GONE
+        } else {
+            binding.sflOfferingDetail.stopShimmer()
+            binding.sflOfferingDetail.visibility = View.GONE
+            binding.svLayout.visibility = View.VISIBLE
+        }
+    }
+
     companion object {
         const val OFFERING_DETAIL_BUNDLE_KEY = "offering_detail_bundle_key"
         const val UPDATED_OFFERING_ID_KEY = "updated_offering_id"

diff --git a/.../main/java/com/zzang/chongdae/presentation/view/offeringdetail/OfferingDetailViewModel.kt b/.../main/java/com/zzang/chongdae/presentation/view/offeringdetail/OfferingDetailViewModel.kt
@@ -95,19 +95,27 @@ class OfferingDetailViewModel
         private val _alertCancelEvent = MutableSingleLiveData<Unit>()
         val alertCancelEvent: SingleLiveData<Unit> get() = _alertCancelEvent
 
+        private val _loading: MutableLiveData<Boolean> = MutableLiveData(false)
+        val loading: LiveData<Boolean> get() = _loading
+
         init {
             loadOffering()
         }
 
         fun loadOffering() {
             viewModelScope.launch {
+                _loading.value = true
                 when (val result = offeringDetailRepository.fetchOfferingDetail(offeringId)) {
                     is Result.Error ->
                         when (result.error) {
                             DataError.Network.UNAUTHORIZED -> {
                                 when (authRepository.saveRefresh()) {
-                                    is Result.Success -> loadOffering()
+                                    is Result.Success -> {
+                                        loadOffering()
+                                    }
+
                                     is Result.Error -> {
+                                        _loading.value = false
                                         userPreferencesDataStore.removeAllData()
                                         _refreshTokenExpiredEvent.setValue(Unit)
                                         return@launch
@@ -125,6 +133,7 @@ class OfferingDetailViewModel
                         }
 
                     is Result.Success -> {
+                        _loading.value = false
                         _offeringDetail.value = result.data
                         _currentCount.value = result.data.currentCount.value
                         _offeringCondition.value = result.data.condition

diff --git a/android/app/src/main/res/layout/fragment_offering_detail.xml b/android/app/src/main/res/layout/fragment_offering_detail.xml
@@ -388,5 +388,16 @@
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/sv_layout" />
 
+        <com.facebook.shimmer.ShimmerFrameLayout
+            android:id="@+id/sfl_offering_detail"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <include layout="@layout/fragment_offering_detail_shimmer" />
+
+        </com.facebook.shimmer.ShimmerFrameLayout>
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/android/app/src/main/res/layout/fragment_offering_detail_shimmer.xml b/android/app/src/main/res/layout/fragment_offering_detail_shimmer.xml
@@ -5,18 +5,18 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        tools:context=".presentation.view.offeringdetail.OfferingDetailFragment">
+        android:layout_height="match_parent">
 
         <ImageView
             android:id="@+id/iv_product"
             android:layout_width="match_parent"
             android:layout_height="250dp"
             android:adjustViewBounds="true"
+            android:background="@color/gray_300"
             android:scaleType="centerCrop"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.0"
-            app:layout_constraintStart_toStartOf="`parent"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
 
@@ -25,17 +25,17 @@
             android:layout_width="@dimen/size_200"
             android:layout_height="@dimen/size_44"
             android:layout_marginStart="23dp"
-            android:layout_marginTop="44dp"
+            android:layout_marginTop="18dp"
+            android:background="@color/gray_300"
             android:paddingBottom="12dp"
             app:layout_constraintBottom_toTopOf="@id/iv_user_emoticon"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/iv_product" />
 
         <ImageView
             android:id="@+id/iv_user_emoticon"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:src="@drawable/ic_detail_user"
+            android:layout_width="15dp"
+            android:layout_height="11dp"
             app:layout_constraintStart_toStartOf="@id/tv_title"
             app:layout_constraintTop_toBottomOf="@id/tv_title" />
 
@@ -76,7 +76,6 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="15dp"
-            android:src="@drawable/ic_detail_money"
             app:layout_constraintStart_toStartOf="@id/tv_title"
             app:layout_constraintTop_toBottomOf="@id/horizon_line" />
 
@@ -114,7 +113,6 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="23dp"
-            android:src="@drawable/ic_detail_clock"
             app:layout_constraintStart_toStartOf="@id/tv_title"
             app:layout_constraintTop_toBottomOf="@id/tv_divided_price" />
 
@@ -142,7 +140,6 @@
             android:layout_height="wrap_content"
             android:layout_marginStart="60dp"
             android:layout_marginTop="23dp"
-            android:src="@drawable/ic_detail_location"
             app:layout_constraintStart_toEndOf="@id/tv_meeting_date_comment"
             app:layout_constraintTop_toBottomOf="@id/tv_divided_price" />
 
@@ -180,6 +177,7 @@
             android:layout_height="@dimen/size_150"
             android:layout_marginTop="18dp"
             android:layout_marginEnd="18dp"
+            android:background="@color/gray_300"
             android:paddingBottom="@dimen/size_50"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="@id/tv_title"