From 9ac95101dead79a0d5d9ee9da7b41fd81f1aec58 Mon Sep 17 00:00:00 2001 From: Wildan M Date: Thu, 18 Jan 2024 23:19:00 +0700 Subject: [PATCH 1/7] Delay bootsplash on login page --- src/Expensify.js | 8 +++++- src/ONYXKEYS.ts | 4 +++ src/libs/actions/App.ts | 27 +++++++++++++++++++ .../BackgroundImage/index.android.js | 15 ++++++++++- .../BackgroundImage/index.ios.js | 4 ++- src/pages/signin/SignInPageLayout/index.js | 15 +++++++++-- src/setup/index.js | 1 + 7 files changed, 69 insertions(+), 5 deletions(-) diff --git a/src/Expensify.js b/src/Expensify.js index 0707ba069241..02a82c3dadf9 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -64,6 +64,9 @@ const propTypes = { /** Tells us if the sidebar has rendered */ isSidebarLoaded: PropTypes.bool, + /** Tells us if the boot splash is auto hide */ + isBootSplashAutoHide: PropTypes.bool, + /** Information about a screen share call requested by a GuidesPlus agent */ screenShareRequest: PropTypes.shape({ /** Access token required to join a screen share room, generated by the backend */ @@ -121,7 +124,7 @@ function Expensify(props) { ); const shouldInit = isNavigationReady && (!isAuthenticated || props.isSidebarLoaded) && hasAttemptedToOpenPublicRoom; - const shouldHideSplash = shouldInit && !isSplashHidden; + const shouldHideSplash = shouldInit && !isSplashHidden && props.isBootSplashAutoHide; const initializeClient = () => { if (!Visibility.isVisible()) { @@ -265,6 +268,9 @@ export default compose( isSidebarLoaded: { key: ONYXKEYS.IS_SIDEBAR_LOADED, }, + isBootSplashAutoHide: { + key: ONYXKEYS.IS_BOOT_SPLASH_AUTO_HIDE, + }, screenShareRequest: { key: ONYXKEYS.SCREEN_SHARE_REQUEST, }, diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 98e3856f4544..52b49780d603 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -27,6 +27,9 @@ const ONYXKEYS = { /** Boolean flag set whenever the sidebar has loaded */ IS_SIDEBAR_LOADED: 'isSidebarLoaded', + /** Boolean flag set whenever the sidebar has loaded */ + IS_BOOT_SPLASH_AUTO_HIDE: 'isBootSplashAutoHide', + /** Boolean flag set whenever we are searching for reports in the server */ IS_SEARCHING_FOR_REPORTS: 'isSearchingForReports', @@ -365,6 +368,7 @@ type OnyxValues = { [ONYXKEYS.ACTIVE_CLIENTS]: string[]; [ONYXKEYS.DEVICE_ID]: string; [ONYXKEYS.IS_SIDEBAR_LOADED]: boolean; + [ONYXKEYS.IS_BOOT_SPLASH_AUTO_HIDE]: boolean; [ONYXKEYS.PERSISTED_REQUESTS]: OnyxTypes.Request[]; [ONYXKEYS.CURRENT_DATE]: string; [ONYXKEYS.CREDENTIALS]: OnyxTypes.Credentials; diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts index 768dc530cc51..0fc69b3ac677 100644 --- a/src/libs/actions/App.ts +++ b/src/libs/actions/App.ts @@ -48,6 +48,14 @@ Onyx.connect({ initWithStoredValues: false, }); +let isBootSplashAutoHide: boolean | null; +Onyx.connect({ + key: ONYXKEYS.IS_BOOT_SPLASH_AUTO_HIDE, + callback: (val) => (isBootSplashAutoHide = val), + initWithStoredValues: true, +}); + + let preferredLocale: string | null; Onyx.connect({ key: ONYXKEYS.NVP_PREFERRED_LOCALE, @@ -129,6 +137,23 @@ function setSidebarLoaded() { Performance.markStart(CONST.TIMING.REPORT_INITIAL_RENDER); } +function preventBootSplashAutoHide() { + if (!isBootSplashAutoHide) { + return; + } + + Onyx.set(ONYXKEYS.IS_BOOT_SPLASH_AUTO_HIDE, false); +} + +function resetBootSplashAutoHide() { + if (isBootSplashAutoHide) { + return; + } + + Onyx.set(ONYXKEYS.IS_BOOT_SPLASH_AUTO_HIDE, true); +} + + let appState: AppStateStatus; AppState.addEventListener('change', (nextAppState) => { if (nextAppState.match(/inactive|background/) && appState === 'active') { @@ -531,6 +556,8 @@ export { setLocale, setLocaleAndNavigate, setSidebarLoaded, + preventBootSplashAutoHide, + resetBootSplashAutoHide, setUpPoliciesAndNavigate, openProfile, redirectThirdPartyDesktopSignIn, diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js index 717f9a3e718c..0a00acf5f6ad 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js @@ -1,9 +1,20 @@ import {Image} from 'expo-image'; +import PropTypes from 'prop-types'; import React from 'react'; import AndroidBackgroundImage from '@assets/images/home-background--android.svg'; import useThemeStyles from '@hooks/useThemeStyles'; import defaultPropTypes from './propTypes'; +const defaultProps = { + isSmallScreen: false, + onLoadEnd: () => {}, +}; + +const propTypes = { + onLoadEnd: PropTypes.func, + ...defaultPropTypes, +}; + function BackgroundImage(props) { const styles = useThemeStyles(); return ( @@ -11,11 +22,13 @@ function BackgroundImage(props) { source={AndroidBackgroundImage} pointerEvents={props.pointerEvents} style={[styles.signInBackground, {width: props.width}]} + onLoadEnd={props.onLoadEnd} /> ); } BackgroundImage.displayName = 'BackgroundImage'; -BackgroundImage.propTypes = defaultPropTypes; +BackgroundImage.propTypes = propTypes; +BackgroundImage.defaultProps = defaultProps; export default BackgroundImage; diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js index da6a6b9ee4fb..a02a13e7559a 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js @@ -9,14 +9,16 @@ import defaultPropTypes from './propTypes'; const defaultProps = { isSmallScreen: false, + onLoadEnd: () => {}, }; const propTypes = { /** Is the window width narrow, like on a mobile device */ isSmallScreen: PropTypes.bool, - + onLoadEnd: PropTypes.func, ...defaultPropTypes, }; + function BackgroundImage(props) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index e2f9c28f9fcd..31103f7b1ea0 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react'; -import {ScrollView, View} from 'react-native'; +import {ScrollView, View, Button} from 'react-native'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import SignInGradient from '@assets/images/home-fade-gradient.svg'; import ImageSVG from '@components/ImageSVG'; @@ -17,6 +17,10 @@ import BackgroundImage from './BackgroundImage'; import Footer from './Footer'; import SignInPageContent from './SignInPageContent'; import scrollViewContentContainerStyles from './signInPageStyles'; +import clearCache from '@libs/actions/Session/clearCache'; +import * as App from '@userActions/App'; +import BootSplash from '@libs/BootSplash'; + const propTypes = { /** The children to show inside the layout */ @@ -87,6 +91,10 @@ function SignInPageLayout(props) { scrollPageToTop, })); + useEffect(() => { + App.preventBootSplashAutoHide(); + }, []); + useEffect(() => { if (prevPreferredLocale !== props.preferredLocale) { return; @@ -99,6 +107,7 @@ function SignInPageLayout(props) { return ( +