refactor: replace LoadingIndicator with ActivityIndicator across mobile app

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/modules/discover/Recommendations.tsx

@@ -8,7 +8,14 @@ import { useAtomValue } from "jotai"
 import type { FC } from "react"
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
 import type { ScrollView } from "react-native"
-import { Animated, Text, TouchableOpacity, useWindowDimensions, View } from "react-native"
+import {
+  ActivityIndicator,
+  Animated,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native"
 import type { PanGestureHandlerGestureEvent } from "react-native-gesture-handler"
 import { PanGestureHandler } from "react-native-gesture-handler"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
@@ -180,7 +187,7 @@ const Tab: TabComponent = ({ tab, ...rest }) => {
 
   const insets = useSafeAreaInsets()
   if (isLoading) {
-    return null
+    return <ActivityIndicator className="flex-1 items-center justify-center" />
   }
 
   return (

apps/mobile/src/modules/discover/search-tabs/hooks.tsx

@@ -1,8 +1,7 @@
 import { withOpacity } from "@follow/utils"
 import { useMemo } from "react"
-import { Text, View } from "react-native"
+import { ActivityIndicator, Text, View } from "react-native"
 
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { SadCuteReIcon } from "@/src/icons/sad_cute_re"
 import { useColor } from "@/src/theme/colors"
 
@@ -15,7 +14,8 @@ export const useDataSkeleton = (isLoading: boolean, data: any) => {
       return (
         <BaseSearchPageRootView className="items-center justify-center">
           <View className="-mt-72" />
-          <LoadingIndicator color={withOpacity(textColor, 0.7)} />
+
+          <ActivityIndicator />
         </BaseSearchPageRootView>
       )
     }

apps/mobile/src/modules/feed-drawer/feed-panel.tsx

@@ -4,6 +4,7 @@ import { HeaderHeightContext } from "@react-navigation/elements"
 import type { FC } from "react"
 import { createContext, memo, useContext, useState } from "react"
 import {
+  ActivityIndicator,
   Animated,
   Easing,
   ScrollView,
@@ -17,7 +18,6 @@ import { useSharedValue } from "react-native-reanimated"
 
 import { AccordionItem } from "@/src/components/ui/accordion/AccordionItem"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { ItemPressable } from "@/src/components/ui/pressable/item-pressable"
 import { MingcuteRightLine } from "@/src/icons/mingcute_right_line"
 import { useFeed, usePrefetchFeed } from "@/src/store/feed/hooks"
@@ -210,7 +210,7 @@ const SubscriptionItem = memo(({ id, className }: { id: string; className?: stri
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator />
+        <ActivityIndicator />
       </View>
     )
   }

apps/mobile/src/modules/feed/FollowFeed.tsx

@@ -4,7 +4,7 @@ import { StackActions } from "@react-navigation/native"
 import { router, Stack, useLocalSearchParams, useNavigation } from "expo-router"
 import { useState } from "react"
 import { Controller, useForm } from "react-hook-form"
-import { ScrollView, Text, View } from "react-native"
+import { ActivityIndicator, ScrollView, Text, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { z } from "zod"
 
@@ -18,7 +18,6 @@ import { FormSwitch } from "@/src/components/ui/form/Switch"
 import { TextField } from "@/src/components/ui/form/TextField"
 import { GroupedInsetListCard } from "@/src/components/ui/grouped/GroupedList"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { useIsRouteOnlyOne } from "@/src/hooks/useIsRouteOnlyOne"
 import { FeedViewSelector } from "@/src/modules/feed/view-selector"
 import { useFeed, usePrefetchFeed } from "@/src/store/feed/hooks"
@@ -41,7 +40,7 @@ export function FollowFeed(props: { id: string }) {
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator />
+        <ActivityIndicator />
       </View>
     )
   }

apps/mobile/src/modules/list/FollowList.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery } from "@tanstack/react-query"
 import { router, Stack } from "expo-router"
 import { Controller, useForm } from "react-hook-form"
-import { Alert, ScrollView, StyleSheet, Text, View } from "react-native"
+import { ActivityIndicator, Alert, ScrollView, StyleSheet, Text, View } from "react-native"
 import { z } from "zod"
 
 import {
@@ -16,7 +16,6 @@ import { FormSwitch } from "@/src/components/ui/form/Switch"
 import { TextField } from "@/src/components/ui/form/TextField"
 import { GroupedInsetListCard } from "@/src/components/ui/grouped/GroupedList"
 import { IconWithFallback } from "@/src/components/ui/icon/fallback-icon"
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { PowerIcon } from "@/src/icons/power"
 import { apiClient } from "@/src/lib/api-fetch"
 import { toast } from "@/src/lib/toast"
@@ -39,7 +38,7 @@ export const FollowList = (props: { id: string }) => {
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator />
+        <ActivityIndicator />
       </View>
     )
   }

apps/mobile/src/modules/settings/routes/About.tsx

@@ -7,6 +7,7 @@ import {
   SafeNavigationScrollView,
 } from "@/src/components/common/SafeNavigationScrollView"
 import {
+  GroupedInsetListBaseCell,
   GroupedInsetListCard,
   GroupedInsetListNavigationLink,
   GroupedInsetListNavigationLinkIcon,
@@ -48,34 +49,39 @@ export const AboutScreen = () => {
   return (
     <SafeNavigationScrollView className="bg-system-grouped-background">
       <NavigationBlurEffectHeader title="About" />
-      <View className="mt-8 flex-1 items-center justify-center">
-        <Logo height={80} width={80} />
-        <Text className="text-label font-sn mt-4 text-2xl font-semibold">Follow</Text>
-        <Text className="text-tertiary-label font-mono text-sm">
-          {appVersion} ({buildId})
-        </Text>
-      </View>
-      <View className="mt-6 flex-1 px-9">
-        <Text className="text-label text-[15px]">
-          Follow is in the early stages of development. If you have any feedback or suggestions,
-          please feel free to open an issue on the{" "}
-          <Link className="text-accent" href="https://github.com/RSSNext/follow">
-            GitHub repository
-          </Link>
-        </Text>
 
-        <Text className="text-label mt-4 text-[15px]">
-          The icon library used is copyrighted by{" "}
-          <Link className="text-accent" href="https://mgc.mingcute.com/">
-            https://mgc.mingcute.com/
-          </Link>{" "}
-          and cannot be redistributed.
-        </Text>
+      <GroupedInsetListCard>
+        <GroupedInsetListBaseCell className="flex-col py-6">
+          <View className="flex-1 items-center justify-center">
+            <Logo height={80} width={80} />
+            <Text className="text-label font-sn mt-4 text-2xl font-semibold">Follow</Text>
+            <Text className="text-tertiary-label font-mono text-sm">
+              {appVersion} ({buildId})
+            </Text>
+          </View>
+          <View className="mt-6 flex-1">
+            <Text className="text-label text-[15px]">
+              Follow is in the early stages of development. If you have any feedback or suggestions,
+              please feel free to open an issue on the{" "}
+              <Link className="text-accent" href="https://github.com/RSSNext/follow">
+                GitHub repository
+              </Link>
+            </Text>
 
-        <Text className="text-label mt-4 text-[15px]">
-          Copyright © 2025 Follow. All rights reserved.
-        </Text>
-      </View>
+            <Text className="text-label mt-4 text-[15px]">
+              The icon library used is copyrighted by{" "}
+              <Link className="text-accent" href="https://mgc.mingcute.com/">
+                https://mgc.mingcute.com/
+              </Link>{" "}
+              and cannot be redistributed.
+            </Text>
+
+            <Text className="text-label mt-4 text-[15px]">
+              Copyright © 2025 Follow. All rights reserved.
+            </Text>
+          </View>
+        </GroupedInsetListBaseCell>
+      </GroupedInsetListCard>
       <View className="mt-10">
         <GroupedInsetListSectionHeader label="Social Links" />
         <GroupedInsetListCard>

apps/mobile/src/modules/settings/routes/Lists.tsx

@@ -1,7 +1,7 @@
 import { router } from "expo-router"
 import { createContext, createElement, useCallback, useContext, useMemo } from "react"
 import type { ListRenderItem } from "react-native"
-import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"
+import { ActivityIndicator, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import Animated, { LinearTransition } from "react-native-reanimated"
 import { useColor } from "react-native-uikit-colors"
 
@@ -15,7 +15,6 @@ import {
   GroupedInsetListCard,
 } from "@/src/components/ui/grouped/GroupedList"
 import { FallbackIcon } from "@/src/components/ui/icon/fallback-icon"
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { ItemPressable } from "@/src/components/ui/pressable/item-pressable"
 import { views } from "@/src/constants/views"
 import { AddCuteReIcon } from "@/src/icons/add_cute_re"
@@ -87,7 +86,7 @@ export const ListsScreen = () => {
             )}
             {isLoading && lists.length === 0 && (
               <View className="mt-1">
-                <LoadingIndicator />
+                <ActivityIndicator />
               </View>
             )}
           </GroupedInsetListCard>

apps/mobile/src/modules/settings/routes/Profile.tsx

@@ -2,7 +2,16 @@ import type { FeedViewType } from "@follow/constants"
 import { cn } from "@follow/utils"
 import { Stack } from "expo-router"
 import { Fragment, useCallback, useEffect, useMemo } from "react"
-import { FlatList, Image, Share, StyleSheet, Text, TouchableOpacity, View } from "react-native"
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  Share,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native"
 import Animated, { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
@@ -11,7 +20,6 @@ import { BlurEffect } from "@/src/components/common/BlurEffect"
 import { FallbackIcon } from "@/src/components/ui/icon/fallback-icon"
 import type { FeedIconRequiredFeed } from "@/src/components/ui/icon/feed-icon"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { MingcuteLeftLineIcon } from "@/src/icons/mingcute_left_line"
 import { Share3CuteReIcon } from "@/src/icons/share_3_cute_re"
 import type { apiClient } from "@/src/lib/api-fetch"
@@ -68,7 +76,7 @@ export const ProfileScreen = () => {
 
         <Stack.Screen options={{ headerShown: false, animation: "fade" }} />
 
-        {isLoading && <LoadingIndicator className="mt-24" size={28} />}
+        {isLoading && <ActivityIndicator className="mt-24" size={28} />}
         {!isLoading && subscriptions && <SubscriptionList subscriptions={subscriptions.data} />}
       </ReAnimatedScrollView>
       {/* Top transparent header buttons */}

apps/mobile/src/modules/subscription/items/SubscriptionItem.tsx

@@ -1,10 +1,9 @@
 import { cn } from "@follow/utils"
 import { memo, useContext } from "react"
-import { Text, View } from "react-native"
+import { ActivityIndicator, Text, View } from "react-native"
 import Animated, { FadeOutUp } from "react-native-reanimated"
 
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
-import { LoadingIndicator } from "@/src/components/ui/loading"
 import { ItemPressable } from "@/src/components/ui/pressable/item-pressable"
 import { useFeed, usePrefetchFeed } from "@/src/store/feed/hooks"
 import { useSubscription } from "@/src/store/subscription/hooks"
@@ -54,7 +53,7 @@ export const SubscriptionItem = memo(({ id, className }: { id: string; className
   if (isLoading) {
     return (
       <View className="mt-24 flex-1 flex-row items-start justify-center">
-        <LoadingIndicator />
+        <ActivityIndicator />
       </View>
     )
   }