Use native loading spinner

The lib is not being maintained and the animation quality is bad

package.json

@@ -70,7 +70,6 @@
     "react-i18next": "^12.1.4",
     "react-intl": "^6.2.5",
     "react-native": "^0.70.6",
-    "react-native-animated-spinkit": "^1.5.2",
     "react-native-blurhash": "^1.1.10",
     "react-native-fast-image": "^8.6.3",
     "react-native-feather": "^1.1.2",

src/components/Button.tsx

@@ -3,7 +3,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useState } from 'react'
 import { AccessibilityProps, Pressable, StyleProp, View, ViewStyle } from 'react-native'
-import { Flow } from 'react-native-animated-spinkit'
+import { Loading } from './Loading'
 import CustomText from './Text'
 
 export interface Props {
@@ -53,7 +53,7 @@ const Button: React.FC<Props> = ({
   const loadingSpinkit = () =>
     loading ? (
       <View style={{ position: 'absolute' }}>
-        <Flow size={StyleConstants.Font.Size[size]} color={colors.secondary} />
+        <Loading />
       </View>
     ) : null
 

src/components/Header/Right.tsx

@@ -1,10 +1,10 @@
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { AccessibilityProps, Pressable, View } from 'react-native'
-import { Flow } from 'react-native-animated-spinkit'
 
 export interface Props {
   accessibilityLabel?: string
@@ -43,7 +43,7 @@ const HeaderRight: React.FC<Props> = ({
   const loadingSpinkit = () =>
     loading ? (
       <View style={{ position: 'absolute' }}>
-        <Flow size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+        <Loading />
       </View>
     ) : null
 

src/components/Loading.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '@utils/styles/ThemeManager'
+import { ActivityIndicator, ViewProps } from 'react-native'
+
+export type Props = {
+  size?: 'small' | 'large'
+} & ViewProps
+
+export const Loading: React.FC<Props> = ({ size = 'small', ...rest }) => {
+  const { colors } = useTheme()
+
+  return <ActivityIndicator size={size} color={colors.secondary} {...rest} />
+}

src/components/Menu/Row.tsx

@@ -1,4 +1,5 @@
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import CustomText from '@components/Text'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
@@ -6,7 +7,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
 import React from 'react'
 import { View } from 'react-native'
-import { Flow } from 'react-native-animated-spinkit'
 import { State, Switch, TapGestureHandler } from 'react-native-gesture-handler'
 
 export interface Props {
@@ -150,7 +150,7 @@ const MenuRow: React.FC<Props> = ({
                 ) : null}
                 {loading ? (
                   <View style={{ position: 'absolute' }}>
-                    <Flow size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+                    <Loading />
                   </View>
                 ) : null}
               </View>

src/components/Timeline/Empty.tsx

@@ -1,5 +1,6 @@
 import Button from '@components/Button'
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import CustomText from '@components/Text'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
@@ -7,7 +8,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
   queryKey: QueryKeyTimeline
@@ -25,7 +25,7 @@ const TimelineEmpty: React.FC<Props> = ({ queryKey }) => {
   const children = () => {
     switch (status) {
       case 'loading':
-        return <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+        return <Loading />
       case 'error':
         return (
           <>

src/components/Timeline/Footer.tsx

@@ -1,4 +1,5 @@
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import CustomText from '@components/Text'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
@@ -6,7 +7,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Trans } from 'react-i18next'
 import { View } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
   queryKey: QueryKeyTimeline
@@ -31,7 +31,7 @@ const TimelineFooter: React.FC<Props> = ({ queryKey, disableInfinity }) => {
       }}
     >
       {!disableInfinity && hasNextPage ? (
-        <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+        <Loading />
       ) : (
         <CustomText fontStyle='S' style={{ color: colors.secondary }}>
           <Trans

src/components/Timeline/Shared/Translate.tsx

@@ -1,3 +1,4 @@
+import { Loading } from '@components/Loading'
 import { ParseHTML } from '@components/Parse'
 import CustomText from '@components/Text'
 import detectLanguage from '@utils/helpers/detectLanguage'
@@ -9,7 +10,6 @@ import * as Localization from 'expo-localization'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 import StatusContext from './Context'
 
 const TimelineTranslate = () => {
@@ -111,13 +111,7 @@ const TimelineTranslate = () => {
                 })
             : t('componentTimeline:shared.translate.default')}
         </CustomText>
-        {isFetching ? (
+        {isFetching ? <Loading style={{ marginLeft: StyleConstants.Spacing.S }} /> : null}
-          <Circle
-            size={StyleConstants.Font.Size.M}
-            color={colors.disabled}
-            style={{ marginLeft: StyleConstants.Spacing.S }}
-          />
-        ) : null}
       </Pressable>
       {devView()}
       {data && data.error === undefined

src/i18n/en/screens/tabs.json

@@ -373,7 +373,8 @@
         "hashtags": "Hashtag",
         "statuses": "Toot"
       },
-      "notFound": "Cannot find <bold>{{searchTerm}}</bold> related {{type}}"
+      "notFound": "Cannot find <bold>{{searchTerm}}</bold> related {{type}}",
+      "noResult": "Cannot find anything, please try a different term"
     },
     "toot": {
       "name": "Discussions",

src/screens/Announcements.tsx

@@ -1,5 +1,6 @@
 import Button from '@components/Button'
 import haptics from '@components/haptics'
+import { Loading } from '@components/Loading'
 import { ParseHTML } from '@components/Parse'
 import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
@@ -20,7 +21,6 @@ import {
   StyleSheet,
   View
 } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 import FastImage from 'react-native-fast-image'
 import { FlatList, ScrollView } from 'react-native-gesture-handler'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -191,14 +191,8 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
 
   const ListEmptyComponent = () => {
     return (
-      <View
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        style={{
+        <Loading />
-          width: Dimensions.get('window').width,
-          justifyContent: 'center',
-          alignItems: 'center'
-        }}
-      >
-        <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
       </View>
     )
   }

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -1,6 +1,7 @@
 import Button from '@components/Button'
 import haptics from '@components/haptics'
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import { MAX_MEDIA_ATTACHMENTS } from '@components/mediaSelector'
 import CustomText from '@components/Text'
 import { useActionSheet } from '@expo/react-native-action-sheet'
@@ -11,7 +12,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useContext, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList, Pressable, StyleSheet, View } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 import FastImage from 'react-native-fast-image'
 import ComposeContext from '../../utils/createContext'
 import { ExtendedAttachment } from '../../utils/types'
@@ -135,7 +135,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
               backgroundColor: colors.backgroundOverlayInvert
             }}
           >
-            <Circle size={StyleConstants.Font.Size.L} color={colors.primaryOverlay} />
+            <Loading />
           </View>
         ) : (
           <View

src/screens/Compose/Root/Suggestions.tsx

@@ -2,13 +2,13 @@ import ComponentAccount from '@components/Account'
 import haptics from '@components/haptics'
 import ComponentHashtag from '@components/Hashtag'
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import ComponentSeparator from '@components/Separator'
 import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { Fragment, useContext, useEffect } from 'react'
 import { View } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 import ComposeContext from '../utils/createContext'
 import { formatText } from '../utils/processText'
 
@@ -125,7 +125,7 @@ const ComposeRootSuggestions: React.FC = () => {
       key='listEmpty'
       style={{ flex: 1, alignItems: 'center', marginVertical: StyleConstants.Spacing.M }}
     >
-      <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+      <Loading />
     </View>
   ) : (
     <>{main()}</>

src/screens/Tabs/Shared/Search/Empty.tsx

@@ -1,4 +1,5 @@
 import ComponentHashtag from '@components/Hashtag'
+import { Loading } from '@components/Loading'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import { useTrendsQuery } from '@utils/queryHooks/trends'
@@ -6,26 +7,37 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { StyleSheet, TextInput, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
   isFetching: boolean
-  inputRef: React.RefObject<TextInput>
+  searchTerm: string
-  setSearchTerm: React.Dispatch<React.SetStateAction<string>>
 }
 
-const SearchEmpty: React.FC<Props> = ({ isFetching, inputRef, setSearchTerm }) => {
+const SearchEmpty: React.FC<Props> = ({ isFetching, searchTerm }) => {
   const { colors } = useTheme()
   const { t } = useTranslation('screenTabs')
 
   const trendsTags = useTrendsQuery({ type: 'tags' })
 
   return (
-    <View style={{ paddingVertical: StyleConstants.Spacing.Global.PagePadding }}>
+    <View
+      style={{
+        flex: 1,
+        minHeight: '100%',
+        paddingVertical: StyleConstants.Spacing.Global.PagePadding
+      }}
+    >
       {isFetching ? (
-        <View style={{ flex: 1, alignItems: 'center' }}>
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-          <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+          <Loading />
+        </View>
+      ) : searchTerm.length ? (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <CustomText
+            style={{ color: colors.primaryDefault }}
+            children={t('shared.search.noResult')}
+          />
         </View>
       ) : (
         <>

src/screens/Tabs/Shared/Search/index.tsx

@@ -131,7 +131,6 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
       style={{ flex: 1 }}
     >
       <SectionList
-        style={{ minHeight: '100%' }}
         sections={data || []}
         renderItem={({ item, section }: { item: any; section: any }) => {
           switch (section.title) {
@@ -146,9 +145,7 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
           }
         }}
         stickySectionHeadersEnabled
-        ListEmptyComponent={
+        ListEmptyComponent={<SearchEmpty isFetching={isFetching} searchTerm={searchTerm} />}
-          <SearchEmpty isFetching={isFetching} inputRef={inputRef} setSearchTerm={setSearchTerm} />
-        }
         keyboardShouldPersistTaps='always'
         renderSectionHeader={({ section: { translation } }) => (
           <View

src/screens/Tabs/Shared/Toot.tsx

@@ -1,5 +1,6 @@
 import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
@@ -16,7 +17,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, FlatList, Platform, Pressable, View } from 'react-native'
-import { Circle } from 'react-native-animated-spinkit'
 import { Path, Svg } from 'react-native-svg'
 
 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
@@ -109,7 +109,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
       }
     },
     {
-      placeholderData: { pages: [{ body: [toot] }] },
+      placeholderData: { pages: [{ body: [{ ...toot, _level: 0 }] }] },
       enabled: !toot._remote,
       staleTime: 0,
       refetchOnMount: true,
@@ -121,7 +121,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
       }
     }
   )
-  useQuery<Mastodon.Status[]>(
+  const remoteQuery = useQuery<Mastodon.Status[]>(
     queryKey.remote,
     async () => {
       const domain = match?.domain
@@ -446,18 +446,9 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
         )
       }}
       ListFooterComponent={
-        <View
+        query.isFetching || remoteQuery.isFetching ? (
-          style={{
+          <View style={{ flex: 1, alignItems: 'center' }} children={<Loading />} />
-            flex: 1,
+        ) : null
-            alignItems: 'center',
-            backgroundColor: colors.backgroundDefault,
-            marginHorizontal: StyleConstants.Spacing.M
-          }}
-        >
-          {query.isLoading ? (
-            <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
-          ) : null}
-        </View>
       }
       {...(loaded.current && { maintainVisibleContentPosition: { minIndexForVisible: 0 } })}
       {...(Platform.OS !== 'ios' && {

src/screens/Tabs/Shared/Users.tsx

@@ -1,6 +1,7 @@
 import ComponentAccount from '@components/Account'
 import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
+import { Loading } from '@components/Loading'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import apiInstance from '@utils/api/instance'
@@ -13,7 +14,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
-import { Circle, Flow } from 'react-native-animated-spinkit'
 import { FlatList } from 'react-native-gesture-handler'
 
 const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
@@ -36,7 +36,7 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
     ...queryKey[1]
   })
 
-  const [isSearching, setIsSearching] = useState(false)
+  const [isSearching, setIsSearching] = useState<number | null>(null)
 
   return (
     <FlatList
@@ -46,14 +46,14 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
         minHeight: '100%',
         paddingVertical: StyleConstants.Spacing.Global.PagePadding
       }}
-      renderItem={({ item }) => (
+      renderItem={({ item, index }) => (
         <ComponentAccount
           account={item}
           props={{
-            disabled: isSearching,
+            disabled: isSearching === index,
             onPress: () => {
               if (data?.pages[0]?.remoteData) {
-                setIsSearching(true)
+                setIsSearching(index)
                 apiInstance<SearchResult>({
                   version: 'v2',
                   method: 'get',
@@ -66,18 +66,18 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
                   }
                 })
                   .then(res => {
-                    setIsSearching(false)
+                    setIsSearching(null)
                     if (res.body.accounts[0]) {
                       navigation.push('Tab-Shared-Account', { account: res.body.accounts[0] })
                     }
                   })
-                  .catch(() => setIsSearching(false))
+                  .catch(() => setIsSearching(null))
               } else {
                 navigation.push('Tab-Shared-Account', { account: item })
               }
             }
           }}
-          children={<Flow size={StyleConstants.Font.Size.L} color={colors.secondary} />}
+          children={<Loading />}
         />
       )}
       onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()}
@@ -93,7 +93,7 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
               alignItems: 'center'
             }}
           >
-            <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
+            <Loading />
           </View>
         ) : null
       }

yarn.lock

@@ -9549,16 +9549,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-animated-spinkit@npm:^1.5.2":
-  version: 1.5.2
-  resolution: "react-native-animated-spinkit@npm:1.5.2"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 5d84b0958b3f9db5223d7c2af242eae45f133cf50715be56f1e266d7c04fe5ecdbd7e01b08146748b06daaf914fe8bc64f13df7faaee98bc687094ca10cae61e
-  languageName: node
-  linkType: hard
-
 "react-native-blurhash@npm:^1.1.10":
   version: 1.1.10
   resolution: "react-native-blurhash@npm:1.1.10"
@@ -11412,7 +11402,6 @@ __metadata:
     react-i18next: ^12.1.4
     react-intl: ^6.2.5
     react-native: ^0.70.6
-    react-native-animated-spinkit: ^1.5.2
     react-native-blurhash: ^1.1.10
     react-native-clean-project: ^4.0.1
     react-native-fast-image: ^8.6.3