Use spinkit instead of activityindicator

src/components/Timelines/Timeline/Empty.tsx

@@ -1,8 +1,9 @@
-import { Feather } from '@expo/vector-icons'
 import React, { useMemo } from 'react'
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
 import { QueryStatus } from 'react-query'
 import Button from '@components/Button'
+import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 
@@ -17,7 +18,9 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
   const children = useMemo(() => {
     switch (status) {
       case 'loading':
-        return <ActivityIndicator />
+        return (
+          <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
+        )
       case 'error':
         return (
           <>

src/components/Timelines/Timeline/Shared/End.tsx

@@ -1,6 +1,7 @@
-import { Feather } from '@expo/vector-icons'
 import React from 'react'
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
+import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 
@@ -14,7 +15,7 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
   return (
     <View style={styles.base}>
       {hasNextPage ? (
-        <ActivityIndicator />
+        <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
       ) : (
         <Text style={[styles.text, { color: theme.secondary }]}>
           居然刷到底了，喝杯{' '}

src/components/Timelines/Timeline/Shared/HeaderNotification.tsx

@@ -1,21 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  ActivityIndicator,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Chase } from 'react-native-animated-spinkit'
+import { useQuery } from 'react-query'
+import client from '@api/client'
 import { Feather } from '@expo/vector-icons'
 import Emojis from '@components/Timelines/Timeline/Shared/Emojis'
-import relativeTime from '@utils/relativeTime'
-import { useTheme } from '@utils/styles/ThemeManager'
-import { StyleConstants } from '@utils/styles/constants'
-import { useQuery } from 'react-query'
-import { relationshipFetch } from '@utils/fetches/relationshipFetch'
-import client from '@api/client'
 import { toast } from '@components/toast'
 import openLink from '@root/utils/openLink'
+import relativeTime from '@utils/relativeTime'
+import { StyleConstants } from '@utils/styles/constants'
+import { relationshipFetch } from '@utils/fetches/relationshipFetch'
+import { useTheme } from '@utils/styles/ThemeManager'
 
 export interface Props {
   notification: Mastodon.Notification
@@ -87,7 +82,9 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
     switch (status) {
       case 'idle':
       case 'loading':
-        return <ActivityIndicator />
+        return (
+          <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
+        )
       case 'success':
         return (
           <Pressable onPress={relationshipOnPress}>

src/components/Timelines/Timeline/Shared/Poll.tsx

@@ -162,12 +162,16 @@ const TimelinePoll: React.FC<Props> = ({
             <View style={styles.optionSelected}>
               <Feather
                 style={styles.voted}
-                name={poll.multiple ? 'check-square' : 'check-circle'}
+                name={
+                  `${poll.own_votes!.includes(index) ? 'check-' : ''}${
+                    poll.multiple ? 'square' : 'circle'
+                  }` as any
+                }
                 size={StyleConstants.Font.Size.M}
                 color={
                   poll.own_votes!.includes(index)
                     ? theme.primary
-                    : theme.background
+                    : theme.disabled
                 }
               />
               <View style={styles.contentSelected}>
@@ -266,7 +270,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row'
   },
   contentSelected: {
-    flexShrink: 1,
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     paddingRight: StyleConstants.Spacing.S