fix: Broken loading animation

- Seems like with `v3.10.0` & `v3.11.0`, you could animate nested text components (ie: virtual components)
- With `v3.12.0` and beyond, it seems like this behavior was patched to the original behavior (noted back in December 2020)
  - `https://github.com/software-mansion/react-native-reanimated/pull/1510`

src/components/navigation/animated-boot-splash.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Dimensions, Text } from "react-native";
+import { Dimensions, Text, View } from "react-native";
 import BootSplash from "react-native-bootsplash";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 
@@ -30,10 +30,15 @@ export function AnimatedBootSplash() {
           style={{ width: Dimensions.get("window").width - 64 }}
           className="absolute bottom-16 left-8"
         >
-          <Text className="mb-2 text-center font-geistMono text-base text-foreground50">
-            Saving tracks in progress
-            <AnimatedTextEllipsis color={Colors.foreground50} />
-          </Text>
+          <View className="mb-2 flex-row items-center justify-center">
+            <Text className="font-geistMono text-base text-foreground50">
+              Saving tracks in progress
+            </Text>
+            <AnimatedTextEllipsis
+              color={Colors.foreground50}
+              textClass="font-geistMono text-base"
+            />
+          </View>
           <Text className="text-center font-geistMonoLight text-xs text-foreground100">
             This may take a while if you just installed the app, added a lot of
             new tracks, or the app is fixing some data.

src/components/ui/loading.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
+import { View } from "react-native";
 import Animated, {
   Easing,
   interpolateColor,
+  useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
   withRepeat,
@@ -55,16 +57,15 @@ export function LoadingIndicator() {
   );
 }
 
-/**
- * Loading animation for inside a `<Text />` — animated 3 consecutive
- * periods.
- */
+/** Loading animation of animated 3 consecutive periods. */
 export function AnimatedTextEllipsis({
   color,
   durationMs: duration = 2500,
+  textClass,
 }: {
   color: `#${string}`;
   durationMs?: number;
+  textClass?: string;
 }) {
   const progress = useSharedValue(0);
 
@@ -97,11 +98,21 @@ export function AnimatedTextEllipsis({
     ),
   );
 
+  const dot1Style = useAnimatedStyle(() => ({ color: colorOpacity1.value }));
+  const dot2Style = useAnimatedStyle(() => ({ color: colorOpacity2.value }));
+  const dot3Style = useAnimatedStyle(() => ({ color: colorOpacity3.value }));
+
   return (
-    <>
-      <Animated.Text style={{ color: colorOpacity1 }}>.</Animated.Text>
-      <Animated.Text style={{ color: colorOpacity2 }}>.</Animated.Text>
-      <Animated.Text style={{ color: colorOpacity3 }}>.</Animated.Text>
-    </>
+    <View className="flex-row">
+      <Animated.Text style={dot1Style} className={textClass}>
+        .
+      </Animated.Text>
+      <Animated.Text style={dot2Style} className={textClass}>
+        .
+      </Animated.Text>
+      <Animated.Text style={dot3Style} className={textClass}>
+        .
+      </Animated.Text>
+    </View>
   );
 }