Fix Shimmer component

It looks like the shimmer component gradient doesn't render anymore
after the react-native upgrade. It seems like this change will kick
rendering of the gradients to after the dimensions of the shimmer is
calculated, fixing the rendering issue.

Author: samholmes

eslint.config.mjs

@@ -203,7 +203,7 @@ export default [
       'src/components/progress-indicators/CancellableProcessingScene.tsx',
       'src/components/progress-indicators/FullScreenLoader.tsx',
       'src/components/progress-indicators/LoadingSplashScreen.tsx',
-      'src/components/progress-indicators/Shimmer.tsx',
+
       'src/components/progress-indicators/StepProgressBar.tsx',
       'src/components/rows/CoinRankRow.tsx',
       'src/components/rows/CryptoFiatAmountRow.tsx',

src/components/progress-indicators/Shimmer.tsx

@@ -17,7 +17,7 @@ interface Props {
   isShown?: boolean
 }
 
-export const Shimmer = (props: Props) => {
+export const Shimmer: React.FC<Props> = props => {
   const { isShown = true } = props
   const theme = useTheme()
   const styles = getStyles(theme)
@@ -58,18 +58,22 @@ export const Shimmer = (props: Props) => {
       <Animated.View
         style={[styles.gradientContainer, { width: shimmerWidth }, animStyle]}
       >
-        <LinearGradient
-          style={styles.gradient}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          colors={['rgba(0,0,0,0)', theme.shimmerBackgroundHighlight]}
-        />
-        <LinearGradient
-          style={styles.gradient}
-          start={{ x: 1, y: 0 }}
-          end={{ x: 0, y: 1 }}
-          colors={['rgba(0,0,0,0)', theme.shimmerBackgroundHighlight]}
-        />
+        {containerWidth > 0 ? (
+          <>
+            <LinearGradient
+              style={styles.gradient}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 1 }}
+              colors={['rgba(0,0,0,0)', theme.shimmerBackgroundHighlight]}
+            />
+            <LinearGradient
+              style={styles.gradient}
+              start={{ x: 1, y: 0 }}
+              end={{ x: 0, y: 1 }}
+              colors={['rgba(0,0,0,0)', theme.shimmerBackgroundHighlight]}
+            />
+          </>
+        ) : null}
       </Animated.View>
     </View>
   ) : null