From 23a9d870eee7ac483bc588f5ccff96cd0653e488 Mon Sep 17 00:00:00 2001 From: Innei Date: Sun, 26 Jan 2025 14:50:28 +0800 Subject: [PATCH] refactor: replace LoadingIndicator with ActivityIndicator across mobile app Signed-off-by: Innei --- .../src/modules/discover/Recommendations.tsx | 11 +++- .../modules/discover/search-tabs/hooks.tsx | 6 +- .../src/modules/feed-drawer/feed-panel.tsx | 4 +- apps/mobile/src/modules/feed/FollowFeed.tsx | 5 +- apps/mobile/src/modules/list/FollowList.tsx | 5 +- .../src/modules/settings/routes/About.tsx | 58 ++++++++++--------- .../src/modules/settings/routes/Lists.tsx | 5 +- .../src/modules/settings/routes/Profile.tsx | 14 ++++- .../subscription/items/SubscriptionItem.tsx | 5 +- 9 files changed, 65 insertions(+), 48 deletions(-) diff --git a/apps/mobile/src/modules/discover/Recommendations.tsx b/apps/mobile/src/modules/discover/Recommendations.tsx index 4c7a233e24..a631f87f9b 100644 --- a/apps/mobile/src/modules/discover/Recommendations.tsx +++ b/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 } return ( diff --git a/apps/mobile/src/modules/discover/search-tabs/hooks.tsx b/apps/mobile/src/modules/discover/search-tabs/hooks.tsx index 39b0e1e7f0..43eb164718 100644 --- a/apps/mobile/src/modules/discover/search-tabs/hooks.tsx +++ b/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 ( - + + ) } diff --git a/apps/mobile/src/modules/feed-drawer/feed-panel.tsx b/apps/mobile/src/modules/feed-drawer/feed-panel.tsx index 5dc34415bf..e24b142fa9 100644 --- a/apps/mobile/src/modules/feed-drawer/feed-panel.tsx +++ b/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 ( - + ) } diff --git a/apps/mobile/src/modules/feed/FollowFeed.tsx b/apps/mobile/src/modules/feed/FollowFeed.tsx index 73348aaed0..ce036d1959 100644 --- a/apps/mobile/src/modules/feed/FollowFeed.tsx +++ b/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 ( - + ) } diff --git a/apps/mobile/src/modules/list/FollowList.tsx b/apps/mobile/src/modules/list/FollowList.tsx index 687158a21f..52680abb3a 100644 --- a/apps/mobile/src/modules/list/FollowList.tsx +++ b/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 ( - + ) } diff --git a/apps/mobile/src/modules/settings/routes/About.tsx b/apps/mobile/src/modules/settings/routes/About.tsx index 5724317f20..82c971dd42 100644 --- a/apps/mobile/src/modules/settings/routes/About.tsx +++ b/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 ( - - - Follow - - {appVersion} ({buildId}) - - - - - Follow is in the early stages of development. If you have any feedback or suggestions, - please feel free to open an issue on the{" "} - - GitHub repository - - - - The icon library used is copyrighted by{" "} - - https://mgc.mingcute.com/ - {" "} - and cannot be redistributed. - + + + + + Follow + + {appVersion} ({buildId}) + + + + + Follow is in the early stages of development. If you have any feedback or suggestions, + please feel free to open an issue on the{" "} + + GitHub repository + + - - Copyright © 2025 Follow. All rights reserved. - - + + The icon library used is copyrighted by{" "} + + https://mgc.mingcute.com/ + {" "} + and cannot be redistributed. + + + + Copyright © 2025 Follow. All rights reserved. + + + + diff --git a/apps/mobile/src/modules/settings/routes/Lists.tsx b/apps/mobile/src/modules/settings/routes/Lists.tsx index 6b8e3e0f44..c73c3a2ea8 100644 --- a/apps/mobile/src/modules/settings/routes/Lists.tsx +++ b/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 && ( - + )} diff --git a/apps/mobile/src/modules/settings/routes/Profile.tsx b/apps/mobile/src/modules/settings/routes/Profile.tsx index d3c1e8eb72..9bc8761cb1 100644 --- a/apps/mobile/src/modules/settings/routes/Profile.tsx +++ b/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 = () => { - {isLoading && } + {isLoading && } {!isLoading && subscriptions && } {/* Top transparent header buttons */} diff --git a/apps/mobile/src/modules/subscription/items/SubscriptionItem.tsx b/apps/mobile/src/modules/subscription/items/SubscriptionItem.tsx index 957795e05b..3adf2d4d9b 100644 --- a/apps/mobile/src/modules/subscription/items/SubscriptionItem.tsx +++ b/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 ( - + ) }