From 8fd762f51c1fa74ec7ec1e55fb7285232620d9a1 Mon Sep 17 00:00:00 2001 From: Dave Formanek <184258725+oddballdave@users.noreply.github.com> Date: Tue, 17 Dec 2024 05:49:33 -0700 Subject: [PATCH 1/2] Incorporated design system LoadingIndicator for spinner with text --- VAMobile/ios/Podfile.lock | 43 +++++++++++++------ .../ios/VAMobile.xcodeproj/project.pbxproj | 4 ++ .../LoadingComponent/LoadingComponent.tsx | 8 +--- 3 files changed, 37 insertions(+), 18 deletions(-) diff --git a/VAMobile/ios/Podfile.lock b/VAMobile/ios/Podfile.lock index 822cbb93c65..3cb188a12a2 100644 --- a/VAMobile/ios/Podfile.lock +++ b/VAMobile/ios/Podfile.lock @@ -1425,7 +1425,7 @@ PODS: - React-Core - react-native-safe-area-context (4.10.9): - React-Core - - react-native-webview (13.10.4): + - react-native-webview (13.12.4): - DoubleConversion - glog - hermes-engine @@ -1742,7 +1742,7 @@ PODS: - RNFBApp - RNFileViewer (2.1.5): - React-Core - - RNGestureHandler (2.18.1): + - RNGestureHandler (2.21.1): - DoubleConversion - glog - hermes-engine @@ -1763,9 +1763,28 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga - - RNKeychain (8.2.0): + - RNKeychain (9.1.0): + - DoubleConversion + - glog + - hermes-engine + - RCT-Folly (= 2024.01.01.00) + - RCTRequired + - RCTTypeSafety - React-Core - - RNLocalize (3.2.1): + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-NativeModulesApple + - React-RCTFabric + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - Yoga + - RNLocalize (3.3.0): - React-Core - RNReactNativeHapticFeedback (2.3.3): - DoubleConversion @@ -2121,7 +2140,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: 4cb898d0bf20404aab1850c656dcea009429d6c1 - DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953 + DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5 FBLazyVector: 7b438dceb9f904bd85ca3c31d64cce32a035472b Firebase: 10c8cb12fb7ad2ae0c09ffc86cd9c1ab392a0031 FirebaseABTesting: d87f56707159bae64e269757a6e963d490f2eebe @@ -2137,7 +2156,7 @@ SPEC CHECKSUMS: FirebaseSessions: dbd14adac65ce996228652c1fc3a3f576bdf3ecc FirebaseSharedSwift: 20530f495084b8d840f78a100d8c5ee613375f6e fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120 - glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2 + glog: 69ef571f3de08433d766d614c73a9838a06bf7eb GoogleAppMeasurement: bb3c564c3efb933136af0e94899e0a46167466a8 GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15 @@ -2184,7 +2203,7 @@ SPEC CHECKSUMS: react-native-image-picker: 2fbbafdae7a7c6db9d25df2f2b1db4442d2ca2ad react-native-notifications: 4601a5a8db4ced6ae7cfc43b44d35fe437ac50c4 react-native-safe-area-context: ab8f4a3d8180913bd78ae75dd599c94cce3d5e9a - react-native-webview: fbafd1591cd068bd599f0d1afb0ddc19718908fa + react-native-webview: db71683cdc313a490afaee486a6efeb9d5a15b59 React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9 React-NativeModulesApple: 0506da59fc40d2e1e6e12a233db5e81c46face27 React-perflogger: 3bbb82f18e9ac29a1a6931568e99d6305ef4403b @@ -2221,17 +2240,17 @@ SPEC CHECKSUMS: RNFBPerf: 9cd7430cb90e4b8aebcd86312f1eb3aae28bd0e7 RNFBRemoteConfig: bfb9f6a04a0269038a352d8386e5c77f4ff98125 RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592 - RNGestureHandler: 939f21fabf5d45a725c0bf175eb819dd25cf2e70 - RNKeychain: bfe3d12bf4620fe488771c414530bf16e88f3678 - RNLocalize: 4f22418187ecd5ca693231093ff1d912d1b3c9bc + RNGestureHandler: be97a346e113ca17a42658671b80e4f98b5e5d74 + RNKeychain: 958a200b26c2df5036222105550290ac0ed98c90 + RNLocalize: 298e85ce16540a11de40c1a588ead39fc5e9a072 RNReactNativeHapticFeedback: 0d591ea1e150f36cb96d868d4e8d77272243d78a RNScreens: 19719a9c326e925498ac3b2d35c4e50fe87afc06 RNSVG: 963a95f1f5d512a13d11ffd50d351c87fb5c6890 SDWebImage: 8a6b7b160b4d710e2a22b6900e25301075c34cb3 SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380 SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d - Yoga: 1354c027ab07c7736f99a3bef16172d6f1b12b47 + Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63 PODFILE CHECKSUM: 528e5ac3a06c35c8645d8271610e36fdcca33735 -COCOAPODS: 1.15.2 +COCOAPODS: 1.16.2 diff --git a/VAMobile/ios/VAMobile.xcodeproj/project.pbxproj b/VAMobile/ios/VAMobile.xcodeproj/project.pbxproj index f2407c8c94f..3c3265b20ed 100644 --- a/VAMobile/ios/VAMobile.xcodeproj/project.pbxproj +++ b/VAMobile/ios/VAMobile.xcodeproj/project.pbxproj @@ -495,6 +495,7 @@ "${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/react-native-blob-util/ReactNativeBlobUtilPrivacyInfo.bundle", ); name = "[CP] Copy Pods Resources"; @@ -512,6 +513,7 @@ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ReactNativeBlobUtilPrivacyInfo.bundle", ); runOnlyForDeploymentPostprocessing = 0; @@ -552,6 +554,7 @@ "${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle", "${PODS_CONFIGURATION_BUILD_DIR}/react-native-blob-util/ReactNativeBlobUtilPrivacyInfo.bundle", ); name = "[CP] Copy Pods Resources"; @@ -569,6 +572,7 @@ "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle", "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ReactNativeBlobUtilPrivacyInfo.bundle", ); runOnlyForDeploymentPostprocessing = 0; diff --git a/VAMobile/src/components/LoadingComponent/LoadingComponent.tsx b/VAMobile/src/components/LoadingComponent/LoadingComponent.tsx index 5866b1546fe..d24a2df0ebb 100644 --- a/VAMobile/src/components/LoadingComponent/LoadingComponent.tsx +++ b/VAMobile/src/components/LoadingComponent/LoadingComponent.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react' import { ViewStyle } from 'react-native' +import { LoadingIndicator } from '@department-of-veterans-affairs/mobile-component-library' import { colors } from '@department-of-veterans-affairs/mobile-tokens' import LottieView from 'lottie-react-native' @@ -107,12 +108,7 @@ const LoadingComponent: FC = ({ mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom} alignItems={'center'}> - {getSpinner()} - - - {text} - - + )} From 52fb659668a6e6510e590d18edc8f14ebdbf3f0d Mon Sep 17 00:00:00 2001 From: Dave Formanek <184258725+oddballdave@users.noreply.github.com> Date: Thu, 19 Dec 2024 06:21:42 -0700 Subject: [PATCH 2/2] Patched animation loop to fix issue with detox testing --- ...airs+mobile-component-library+0.27.1.patch | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch diff --git a/VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch b/VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch new file mode 100644 index 00000000000..1671da99f55 --- /dev/null +++ b/VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch @@ -0,0 +1,42 @@ +diff --git a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/LoadingIndicator/LoadingIndicator.tsx b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/LoadingIndicator/LoadingIndicator.tsx +index dabf3c6..a0c31be 100644 +--- a/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/LoadingIndicator/LoadingIndicator.tsx ++++ b/node_modules/@department-of-veterans-affairs/mobile-component-library/src/components/LoadingIndicator/LoadingIndicator.tsx +@@ -6,7 +6,7 @@ import { + View, + ViewStyle, + } from 'react-native' +-import React, { useEffect } from 'react' ++import React, { useEffect, useRef } from 'react' + + import { Icon, IconProps } from '../Icon/Icon' + import { Spacer } from '../Spacer/Spacer' +@@ -36,19 +36,17 @@ export const LoadingIndicator: React.FC = ({ + children, + }) => { + const theme = useTheme() +- const rotation = new Animated.Value(0) ++ const rotation = useRef(new Animated.Value(0)).current + + useEffect(() => { +- const animate = () => { +- rotation.setValue(0) // Reset the rotation value to 0 +- Animated.timing(rotation, { +- toValue: 1, +- duration: 1500, +- easing: Easing.linear, +- useNativeDriver: true, +- }).start(() => animate()) // Loop the animation +- } +- animate() ++ const animation = Animated.loop(Animated.timing(rotation, { ++ toValue: 1, ++ duration: 1500, ++ easing: Easing.linear, ++ useNativeDriver: true, ++ })) ++ animation.start() // Loop the animation ++ return () => animation.stop() // Cleanup animation when component unmounts + }, [rotation]) + + const rotate = rotation.interpolate({