NTP-4562 || events fix && No Internet Handling (#13110)

Co-authored-by: Aman <amankasyapp@gmail.com>
2024-10-15 21:14:38 +05:30
parent a4e0c45755
commit 198d15a35f
12 changed files with 80 additions and 61 deletions
--- a/android/app/src/main/java/com/naviapp/home/compose/activity/HomePageActivity.kt
+++ b/android/app/src/main/java/com/naviapp/home/compose/activity/HomePageActivity.kt
@@ -624,6 +624,7 @@ class HomePageActivity :
                                fetchProfileItems()
                                fetchScreenOverlayData()
                            }
+                            sharedVM.setInternetConnectivityStatus(true)
                            // Set the connecting nudge and
                            // remove any network related nudge after 2 seconds
                            bottomNavBarVM.setBottomNudge(
@@ -638,6 +639,7 @@ class HomePageActivity :
                        ConnectivityObserver.Status.Unavailable,
                        ConnectivityObserver.Status.Losing,
                        ConnectivityObserver.Status.Lost -> {
+                            sharedVM.setInternetConnectivityStatus(false)
                            bottomNavBarVM.setBottomNudge(
                                visible = true,
                                bottomStickyNudgeState =
--- a/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/investmentTab/InvestmentsTab.kt
+++ b/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/investmentTab/InvestmentsTab.kt
@@ -62,6 +62,8 @@ fun InvestmentsTab(
    val scrollState = rememberLazyListState()
    val statusBarColor = investmentsTabVm.statusBarColor.collectAsStateWithLifecycle()
    val bottomStickyNudgeData = investmentsTabVm.bottomStickyNudgeData.collectAsStateWithLifecycle()
+    val internetConnectivityStatus =
+        sharedVM.internetConnectivityStatus.collectAsStateWithLifecycle(false)

    LaunchedEffect(scrollState.firstVisibleItemIndex) {
        snapshotFlow { scrollState.firstVisibleItemIndex }
@@ -103,6 +105,12 @@ fun InvestmentsTab(
        }
    }

+    LaunchedEffect(key1 = internetConnectivityStatus.value) {
+        if (internetConnectivityStatus.value) {
+            investmentsScreenHelper.refreshInvestmentTabScreen(investmentsTabVm)
+        }
+    }
+
    investmentsTabScreenData.value.let { state ->
        if (state is InvestmentsVm.InvestmentsTabScreenState.Success) {
            Scaffold(
--- a/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/investmentTab/widgets/LottieWithActionCardWidgetComposable.kt
+++ b/android/app/src/main/java/com/naviapp/home/dashboard/ui/compose/investmentTab/widgets/LottieWithActionCardWidgetComposable.kt
@@ -7,6 +7,7 @@

 package com.naviapp.home.dashboard.ui.compose.investmentTab.widgets

+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
@@ -15,15 +16,21 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
 import com.navi.base.model.ActionData
 import com.navi.base.model.CtaData
+import com.navi.design.theme.FFF6DB
+import com.navi.design.theme.WhiteFFFFFF
+import com.navi.design.utils.parseColorSafe
 import com.navi.naviwidgets.extensions.NaviLottie
 import com.navi.naviwidgets.models.FooterButtonState
+import com.navi.naviwidgets.models.LottieFieldData
 import com.naviapp.R
 import com.naviapp.home.dashboard.models.investmentTabWidgetData.LottieWithActionCardWidget
 import com.naviapp.home.dashboard.ui.compose.investmentTab.genericComposables.ActionCardComposable
+import com.naviapp.home.utils.shimmerEffect

@Composable
 fun LottieWithActionCardComposable(
@@ -45,7 +52,15 @@ fun LottieWithActionCardComposable(
                    modifier =
                        Modifier.height(lottieHeight.dp)
                            .width(LocalConfiguration.current.screenWidthDp.dp),
-                    lottie = it
+                    lottie = it,
+                    placeholder = {
+                        Placeholder(
+                            modifier =
+                                Modifier.height(lottieHeight.dp)
+                                    .width(LocalConfiguration.current.screenWidthDp.dp),
+                            data = it
+                        )
+                    }
                )
            }

@@ -79,3 +94,18 @@ fun LottieWithActionCardComposable(
        }
    }
 }
+
+@Composable
+fun Placeholder(modifier: Modifier = Modifier, data: LottieFieldData) {
+    Box(
+        modifier =
+            modifier
+                .background(Color.Yellow)
+                .shimmerEffect(
+                    shimmerColor =
+                        data.placeholderColors?.map { colorString ->
+                            Color(colorString.parseColorSafe())
+                        } ?: listOf(FFF6DB, WhiteFFFFFF, FFF6DB)
+                )
+    )
+}
--- a/android/app/src/main/java/com/naviapp/home/utils/HomePageUtils.kt
+++ b/android/app/src/main/java/com/naviapp/home/utils/HomePageUtils.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.composed
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.sp
@@ -39,7 +40,7 @@ import com.navi.pay.common.theme.color.NaviPayColor
 import com.navi.uitron.model.UiTronResponse
 import com.navi.uitron.render.UiTronRenderer

-fun Modifier.shimmerEffect(): Modifier = composed {
+fun Modifier.shimmerEffect(shimmerColor: List<Color>? = null): Modifier = composed {
    var size by remember { mutableFloatStateOf(0f) }
    val transition = rememberInfiniteTransition(label = "")
    val startOffsetX by
@@ -58,11 +59,12 @@ fun Modifier.shimmerEffect(): Modifier = composed {
            brush =
                Brush.linearGradient(
                    colors =
-                        listOf(
-                            NaviPayColor.loaderGradient,
-                            NaviPayColor.bgAlt2,
-                            NaviPayColor.loaderGradient
-                        ),
+                        shimmerColor
+                            ?: listOf(
+                                NaviPayColor.loaderGradient,
+                                NaviPayColor.bgAlt2,
+                                NaviPayColor.loaderGradient
+                            ),
                    start = Offset(startOffsetX, 0f),
                    end = Offset(startOffsetX + size, this.size.height)
                )
--- a/android/app/src/main/java/com/naviapp/home/viewmodel/SharedVM.kt
+++ b/android/app/src/main/java/com/naviapp/home/viewmodel/SharedVM.kt
@@ -34,9 +34,6 @@ class SharedVM @Inject constructor() : BaseVM() {
    private val _uiTronActionHandler = MutableStateFlow<UiTronActionHandler?>(null)
    val uiTronActionHandler = _uiTronActionHandler.asStateFlow()

-    private val _insuranceTabFetchFlag = MutableStateFlow(false)
-    val insuranceTabFetchFlag = _insuranceTabFetchFlag.asStateFlow()
-
    private val _selectedTabId = MutableStateFlow(BottomBarTabType.HOME.name)
    val selectedTabId = _selectedTabId.asStateFlow()

@@ -55,6 +52,9 @@ class SharedVM @Inject constructor() : BaseVM() {
        )
    val bottomNavBarStateHolder = _bottomNavBarStateHolder.asStateFlow()

+    private val _internetConnectivityStatus = MutableSharedFlow<Boolean>(replay = 1)
+    val internetConnectivityStatus = _internetConnectivityStatus.asSharedFlow()
+
    private val _bottomSheetStateHolder =
        MutableStateFlow(
            HpBottomSheetStateHolder(
@@ -68,10 +68,6 @@ class SharedVM @Inject constructor() : BaseVM() {
        _uiTronActionHandler.update { uiTronActionHandler }
    }

-    fun setInsuranceTabFetchFlag(flag: Boolean) {
-        viewModelScope.launch { _insuranceTabFetchFlag.emit(flag) }
-    }
-
    fun updateSelectedTabId(tabId: String) {
        _selectedTabId.update { tabId }
    }
@@ -111,4 +107,8 @@ class SharedVM @Inject constructor() : BaseVM() {
    fun updatePaymentDataFromLoansTabScreen(data: InitiatePaymentFromComposeData) {
        viewModelScope.launch { _initiatePaymentFromLoansTabScreen.emit(data) }
    }
+
+    fun setInternetConnectivityStatus(status: Boolean) {
+        viewModelScope.launch { _internetConnectivityStatus.emit(status) }
+    }
 }
--- a/android/navi-amc/src/main/java/com/navi/amc/common/fragment/PennyDropOptionsFragment.kt
+++ b/android/navi-amc/src/main/java/com/navi/amc/common/fragment/PennyDropOptionsFragment.kt
@@ -32,6 +32,7 @@ import com.navi.amc.databinding.PennyDropOptionsLayoutBinding
 import com.navi.amc.fundbuy.models.RewardsData
 import com.navi.amc.utils.AmcAnalytics
 import com.navi.amc.utils.AmcAnalytics.BANK_VERIFICATION_OPTIONS
+import com.navi.amc.utils.AmcAnalytics.BANK_VERIFICATION_OPTIONS_FOOTER_CLICKED
 import com.navi.amc.utils.AmcAnalytics.CHANGE_BANK
 import com.navi.amc.utils.AmcAnalytics.PENNY_DROP_OPTIONS
 import com.navi.amc.utils.AmcAnalytics.UPI_APP_AVAILABLE
@@ -150,7 +151,7 @@ class PennyDropOptionsFragment() : AmcBaseFragment() {
                        if (viewModel.paymentMethod?.id.orEmpty() == RPD) {
                            showLoader()
                            sendEvent(
-                                it.nextCta?.metaData?.clickedData,
+                                BANK_VERIFICATION_OPTIONS_FOOTER_CLICKED,
                                hashMapOf(
                                    Pair(
                                        AmcAnalytics.FUND_ID,
@@ -165,7 +166,7 @@ class PennyDropOptionsFragment() : AmcBaseFragment() {
                        } else {
                            val action = viewModel.paymentMethod?.actionData
                            sendEvent(
-                                it.nextCta?.metaData?.clickedData,
+                                BANK_VERIFICATION_OPTIONS_FOOTER_CLICKED,
                                hashMapOf(
                                    Pair(
                                        AmcAnalytics.FUND_ID,
--- a/android/navi-amc/src/main/java/com/navi/amc/fundbuy/activities/FundBuyActivity.kt
+++ b/android/navi-amc/src/main/java/com/navi/amc/fundbuy/activities/FundBuyActivity.kt
@@ -178,7 +178,7 @@ class FundBuyActivity :
    }

    override val screenName: String
-        get() = AmcAnalytics.BUY_ACTIVITY
+        get() = AmcAnalytics.FUND_BUY_ACTIVITY

    override val moduleName: ModuleNameV2
        get() = ModuleNameV2.AMC
--- a/android/navi-amc/src/main/java/com/navi/amc/fundbuy/fragments/AutoPaySetupFragmentV2.kt
+++ b/android/navi-amc/src/main/java/com/navi/amc/fundbuy/fragments/AutoPaySetupFragmentV2.kt
@@ -28,7 +28,7 @@ import com.navi.amc.utils.AmcAnalytics
 import com.navi.amc.utils.AmcAnalytics.AMC_AUTOPAY_MODE_CHANGED
 import com.navi.amc.utils.AmcAnalytics.AMC_AUTOPAY_MODE_CLICKED
 import com.navi.amc.utils.AmcAnalytics.LIMIT
-import com.navi.amc.utils.AmcAnalytics.SIP_AUTO_PAY_LAND
+import com.navi.amc.utils.AmcAnalytics.SIP_AUTO_PAY_PAGE
 import com.navi.amc.utils.Constant
 import com.navi.amc.utils.Constant.AMOUNT
 import com.navi.amc.utils.Constant.DISMISS
@@ -60,7 +60,7 @@ class AutoPaySetupFragmentV2 : AmcBaseFragment() {
    private val paymentSharedVM: PaymentSharedVM by activityViewModels()
    private lateinit var binding: AutoPaySetupLayoutBinding
    override val screenName: String
-        get() = SIP_AUTO_PAY_LAND
+        get() = SIP_AUTO_PAY_PAGE

    override fun onAttach(context: Context) {
        super.onAttach(context)
@@ -212,7 +212,7 @@ class AutoPaySetupFragmentV2 : AmcBaseFragment() {
                        true
                    } ?: run { false }
            }
-            sendEvent(SIP_AUTO_PAY_LAND, hashMapOf(LIMIT to viewModel.getAutoPayLimit()))
+            sendEvent(SIP_AUTO_PAY_PAGE, hashMapOf(LIMIT to viewModel.getAutoPayLimit()))
        }
    }

--- a/android/navi-amc/src/main/java/com/navi/amc/utils/AmcAnalytics.kt
+++ b/android/navi-amc/src/main/java/com/navi/amc/utils/AmcAnalytics.kt
@@ -16,14 +16,13 @@ import com.navi.common.upi.SOURCE_SCREEN_NAME

@Keep
 object AmcAnalytics {
-    const val KYC_ONBOARD_ACTIVITY = "amc_init_kyc_onbrd"
+    const val KYC_ONBOARD_ACTIVITY = "amc_kyc_onboard"
    const val KYC_PAN = "amc_init_kyc_enter_pan"
    const val KYC_NAME = "amc_init_kyc_enter_name"
    const val KYC_NAME_FOR_PAN = "amc_init_kyc_pan_fetch_name"
    const val KYC_PERMISSION = "amc_init_kyc_permission"
    const val KYC_BANK_DETAILS = "amc_init_kyc_bank_details"
    const val KYC_BANK_SEARCH = "amc_init_kyc_select_bank"
-    const val KYC_IFSC = "amc_init_kyc_select_ifsc"
    const val KYC_ESIGN = "amc_init_kyc_aadhaar_esign"
    const val KYC_START = "amc_init_kyc_digilocker_onbrd"
    const val KYC_START_OKYC = "amc_init_kyc_okyc_onbrd"
@@ -38,9 +37,9 @@ object AmcAnalytics {
    const val SIP_INIT_MY_INVESTMENT = "amc_init_investments_sips"
    const val PORTFOLIO_INIT_MY_INVESTMENT = "amc_init_investments_portfolio"
    const val ORDER_INIT_MY_INVESTMENT = "amc_init_investments_orders"
-    const val KYC_ACTIVITY = "amc_kyc_activity"
-    const val CHECKER_ACTIVITY = "amc_checker_activity"
-    const val BUY_ACTIVITY = "amc_buy_activity"
+    const val KYC_ACTIVITY = "amc_kyc"
+    const val CHECKER_ACTIVITY = "amc_checker"
+    const val FUND_BUY_ACTIVITY = "amc_fund_buy"
    const val FUND_LIST = "amc_init_fund_listing"
    const val FUND_CATEOGRY_LIST = "amc_init_fund_listing_category"
    const val FUND_LANDING_V1 = "amc_init_fund_landing_v1"
@@ -48,7 +47,6 @@ object AmcAnalytics {
    const val INVESTMENT_INIT_LANDING_PAGE = "investments_init_landing_page"
    const val FUND_DETAILS = "amc_init_mf"
    const val AMC_RANDOM = "amc_random"
-    const val FUND_DETAILS_V2 = "amc_fund_details_v2"
    const val FUND_BUY_SIP_LUMPSUM_SCREEN = "fund_buy_sip_lumpsum_screen"
    const val AMC_INIT_OLD_SIP_LUMPSUM = "amc_init_old_sip_lumpsum"
    const val FUND_BUY_LUMPSUM_SCREEN = "fund_buy_lumpsum_screen"
@@ -56,10 +54,7 @@ object AmcAnalytics {
    const val ORDER_STATUS_SCREEN = "amc_init_order_details"
    const val TRANSACTION_HISTORY = "amc_init_trans_history"
    const val INVESTMENT_DETAILS = "investment_details"
-    const val OTP_REDEEM_INIT = "amc_init_redeem_otp"
    const val OTP_INIT = "amc_init_otp_screen"
-    const val AMOUNT_PAGE_LAND = "amc_amount_page_land"
-    const val PORTFOLIO = "amc_init_investments_portfolio"
    const val AUTOPAY_MODIFY = "amc_init_autopay_mandate"
    const val AUTOPAY_SUCCESS = "amc_init_autopay_success"
    const val CALENDAR = "amc_calendar"
@@ -68,7 +63,6 @@ object AmcAnalytics {
    const val ISIN = "isin"
    const val FUND_ID = "fund_id"
    const val ACTION_TYPE = "action_type"
-    const val TIME_PERIOD = "time_period"
    const val SIP_FREQUENCY = "sip_frequency"
    const val SIP_DATE = "sip_date"
    const val PAY_METHOD = "pay_method"
@@ -133,7 +127,6 @@ object AmcAnalytics {

    const val AMC_INIT_KYC_PAN_VERIFY_FAILED = "amc_init_kyc_pan_verify_failed"
    const val AMC_INIT_KYC_NAME_VERIFY_FAILED = "amc_init_kyc_name_verify_failed"
-    const val AMC_BTN_FUND_LISTING_CARD = "amc_btn_fund_listing_card"

    const val AMC_BTN_KYC_PERSONAL_DETAILS_EMAIL_TIP = "amc_btn_kyc_personal_details_email_tip"
    const val SELECTED_EMAIL = "selected_email"
@@ -153,7 +146,6 @@ object AmcAnalytics {
    const val IS_VALID = "is_valid"
    const val IS_PREFILLED = "is_prefilled"
    const val IS_CHANGED = "is_changed"
-    const val ORDER_TYPE = "order_type"
    const val SIGN_TYPE = "sign_type"
    const val WET_SIGNATURE_TYPE_DEFAULT = "default"
    const val WET_SIGNATURE_TYPE_MANUALLY = "manually"
@@ -175,8 +167,10 @@ object AmcAnalytics {
    const val COARSE_LOCATION_PERMISSION_ALLOWED = "amc_btn_permission_coarse_location_allow"
    const val COARSE_LOCATION_PERMISSION_DENIED = "amc_btn_permission_coarse_location_deny"
    const val NFO_SCREEN = "nfoScreen"
-    const val BANK_VERIFICATION_OPTIONS = "bank_verification_options"
+    const val BANK_VERIFICATION_OPTIONS = "amc_bank_verification_options"
    const val PENNY_DROP_OPTIONS = "amc_init_kyc_bank_verify"
+    const val BANK_VERIFICATION_OPTIONS_FOOTER_CLICKED =
+        "amc_bank_verification_options_footer_clicked"
    const val CHANGE_BANK = "changeBank"
    const val RPD_SUCCESS_SCREEN = "amc_init_kyc_bank_verify_success"
    const val RPD_ABORTED = "rpd_aborted"
@@ -184,8 +178,8 @@ object AmcAnalytics {
    const val AMOUNT_REDEEMED = "amount_redeemed"
    const val UNITS_REDEEMED = "units_redeemed"
    const val PERC_TOTAL_FUND_VALUE = "perc_total_fund_value"
-    const val SIP_AUTO_PAY_LAND = "amc_sip_auto_pay_page_land"
-    const val SIP_CHOOSE_TYPE_LAND = "amc_sip_choose_type_page_land"
+    const val SIP_AUTO_PAY_PAGE = "amc_sip_auto_pay_page"
+    const val SIP_CHOOSE_TYPE_LAND = "amc_sip_choose_type_page"

    const val AMC_INIT_SIMPLIFIED_LUMPSUM = "amc_init_simplified_lumpsum"
    const val AMC_INIT_SIMPLIFIED_SIP = "amc_init_simplified_sip"
@@ -203,7 +197,7 @@ object AmcAnalytics {
    const val LATENCY_STATUS = "status"
    const val SCREEN_NAME = "screen_name"
    const val LAND = "_land"
-    const val ACTIVITY_LAND = "activity_land"
+    const val ACTIVITY_LAND = "_activity_land"
    const val AMC_LATENCY_KYC_INITIATION_TIME = "amc_latency_kyc_initiation_time"
    const val AMC_LATENCY_KYC_PROCESSING_TIME = "amc_latency_kyc_processing_time"
    const val AMC_LATENCY_KYC_CALLBACK_TIME = "amc_latency_kyc_callback_time"
@@ -221,29 +215,6 @@ object AmcAnalytics {
    const val AMC_LATENCY_PENNY_DROP_TIME = "amc_latency_penny_drop_time"
    const val AMC_TIME_SPENT_ON_SCREEN = "amc_time_on_screen"

-    const val AMC_BTN_MF_PAGE_CHART_PERIOD_PILLS = "amc_btn_mf_page_chart_period_pills"
-    const val AMC_BTN_MF_PAGE_DETAILS_SECTION_DROPDOWN = "amc_btn_mf_page_details_section_dropdown"
-    const val AMC_BTN_MF_PAGE_DETAILS_SECTION_LEARN_TERMS =
-        "amc_btn_mf_page_details_section_learn_terms"
-    const val AMC_BTN_MF_PAGE_CALCULATOR_SECTION_DROPDOWN =
-        "amc_btn_mf_page_calculator_section_dropdown"
-    const val AMC_BTN_MF_PAGE_CALCULATOR_SECTION_INVEST_TYPE =
-        "amc_btn_mf_page_calculator_section_invest_type"
-    const val AMC_BTN_MF_PAGE_CALCULATOR_SECTION_PERIOD_PILLS =
-        "amc_btn_mf_page_calculator_section_period_pills"
-    const val AMC_BTN_MF_PAGE_CALCULATOR_SECTION_SLIDER_MOVE =
-        "amc_btn_mf_page_calculator_section_slider_move"
-    const val AMC_BTN_MF_PAGE_HOLDINGS_SECTION_DROPDOWN =
-        "amc_btn_mf_page_holdings_section_dropdown"
-    const val AMC_BTN_MF_PAGE_HOLDINGS_SECTION_VIEW_ALL =
-        "amc_btn_mf_page_holdings_section_view_all"
-    const val AMC_BTN_MF_PAGE_MANAGER_SECTION_DROPDOWN = "amc_btn_mf_page_manager_section_dropdown"
-    const val AMC_BTN_MF_PAGE_MANAGER_SECTION_KNOW_MORE =
-        "amc_btn_mf_page_manager_section_know_more"
-    const val AMC_BTN_MF_PAGE_MANAGER_SECTION_WHAT_ROLE =
-        "amc_btn_mf_page_manager_section_what_role"
-    const val AMC_BTN_MF_PAGE_SCHEMES_INFO_DOWNLOAD = "amc_btn_mf_page_schemes_info_download"
-
    const val AMC_BTN_OTP_SCREEN_VERIFY = "amc_btn_otp_screen_verify"
    const val AMC_INIT_OTP_SCREEN_RESULT = "amc_init_otp_screen_result"

--- a/android/navi-design/src/main/java/com/navi/design/theme/Color.kt
+++ b/android/navi-design/src/main/java/com/navi/design/theme/Color.kt
@@ -61,3 +61,4 @@ val FFF5DB = Color(0xFFFFF5DB)
 val FFF9E0 = Color(0xFFFFF9E0)
 val FFF6D5 = Color(0xFFFFF6D5)
 val D9F6E8 = Color(0xFFD9F6E8)
+val FFF6DB = Color(0xFFFFF6DB)
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/ComposeWidgetExt.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/extensions/ComposeWidgetExt.kt
@@ -1022,7 +1022,8 @@ fun NaviLottie(
    onAnimationEnd: (() -> Unit)? = null,
    contentScale: ContentScale = ContentScale.Fit,
    isPlaying: Boolean = true,
-    onAnimationStart: (() -> Unit)? = null
+    onAnimationStart: (() -> Unit)? = null,
+    placeholder: @Composable (() -> Unit)? = null
 ) {
    val spec: LottieCompositionSpec = LottieCompositionSpec.Url(lottie.lottieUrl.toString())

@@ -1039,7 +1040,9 @@ fun NaviLottie(
        }
    }

-    if (animationStarted) {
+    if (composition == null) {
+        placeholder?.invoke()
+    } else if (animationStarted) {
        val progress by animateLottieCompositionAsState(composition)
        if (progress == 1.0f && !showLottieInfiniteTimes) {
            LaunchedEffect(Unit) { onAnimationEnd?.invoke() }
--- a/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/LottieFieldData.kt
+++ b/android/navi-widgets/src/main/java/com/navi/naviwidgets/models/LottieFieldData.kt
@@ -22,4 +22,5 @@ data class LottieFieldData(
    @SerializedName("width") val width: Int? = null,
    @SerializedName("aspectRatio") val aspectRatio: Float? = null,
    @SerializedName("animationDelay") val animationDelay: Int? = null,
+    @SerializedName("placeholderColors") val placeholderColors: List<String>? = null,
 ) : Parcelable