Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore/8936-UseDesignSystemLoadingComponent #10392

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

chore/8936-UseDesignSystemLoadingComponent #10392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8fd762f
Incorporated design system LoadingIndicator for spinner with text
oddballdave Dec 17, 2024
52fb659
Patched animation loop to fix issue with detox testing
oddballdave Dec 19, 2024
4e9558c
Merge branch 'develop' into chore/8936-UseDesignSystemLoadingComponent
oddballdave Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 31 additions & 12 deletions VAMobile/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -1742,7 +1742,7 @@ PODS:
- RNFBApp
- RNFileViewer (2.1.5):
- React-Core
- RNGestureHandler (2.18.1):
- RNGestureHandler (2.21.1):
- DoubleConversion
- glog
- hermes-engine
Expand All @@ -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
Expand Down Expand Up @@ -2121,7 +2140,7 @@ EXTERNAL SOURCES:

SPEC CHECKSUMS:
boost: 4cb898d0bf20404aab1850c656dcea009429d6c1
DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
FBLazyVector: 7b438dceb9f904bd85ca3c31d64cce32a035472b
Firebase: 10c8cb12fb7ad2ae0c09ffc86cd9c1ab392a0031
FirebaseABTesting: d87f56707159bae64e269757a6e963d490f2eebe
Expand All @@ -2137,7 +2156,7 @@ SPEC CHECKSUMS:
FirebaseSessions: dbd14adac65ce996228652c1fc3a3f576bdf3ecc
FirebaseSharedSwift: 20530f495084b8d840f78a100d8c5ee613375f6e
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
GoogleAppMeasurement: bb3c564c3efb933136af0e94899e0a46167466a8
GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
4 changes: 4 additions & 0 deletions VAMobile/ios/VAMobile.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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";
Expand All @@ -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;
Expand Down
42 changes: 42 additions & 0 deletions VAMobile/patches/@department-of-veterans-affairs+mobile-component-library+0.27.1.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<LoadingIndicatorProps> = ({
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({
8 changes: 2 additions & 6 deletions VAMobile/src/components/LoadingComponent/LoadingComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -107,12 +108,7 @@ const LoadingComponent: FC<LoadingComponentProps> = ({
mt={theme.dimensions.contentMarginTop}
mb={theme.dimensions.contentMarginBottom}
alignItems={'center'}>
{getSpinner()}
<Box mt={theme.dimensions.condensedMarginBetween}>
<TextView textAlign={'center'} variant="MobileBody" accessibilityLabel={a11yLabel}>
{text}
</TextView>
</Box>
<LoadingIndicator text={text ?? ''} a11yLabel={a11yLabel} />
</Box>
</VAScrollView>
)}
Expand Down
Loading