Fixed #17

src/components/Button.tsx

@@ -11,7 +11,7 @@ import {
   View,
   ViewStyle
 } from 'react-native'
-import { Chase } from 'react-native-animated-spinkit'
+import { Flow } from 'react-native-animated-spinkit'
 
 export interface Props {
   style?: StyleProp<ViewStyle>
@@ -62,7 +62,7 @@ const Button: React.FC<Props> = ({
   const loadingSpinkit = useMemo(
     () => (
       <View style={{ position: 'absolute' }}>
-        <Chase size={StyleConstants.Font.Size[size]} color={theme.secondary} />
+        <Flow size={StyleConstants.Font.Size[size]} color={theme.secondary} />
       </View>
     ),
     [mode]

src/components/Header/Right.tsx

@@ -1,10 +1,9 @@
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
-import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { useMemo } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { Chase } from 'react-native-animated-spinkit'
+import { Flow } from 'react-native-animated-spinkit'
 
 export interface Props {
   type?: 'icon' | 'text'
@@ -27,19 +26,10 @@ const HeaderRight: React.FC<Props> = ({
 }) => {
   const { theme } = useTheme()
 
-  const mounted = useRef(false)
-  // useEffect(() => {
-  //   if (mounted.current) {
-  //     layoutAnimation()
-  //   } else {
-  //     mounted.current = true
-  //   }
-  // }, [content, loading, disabled])
-
   const loadingSpinkit = useMemo(
     () => (
       <View style={{ position: 'absolute' }}>
-        <Chase
+        <Flow
           size={StyleConstants.Font.Size.M * 1.25}
           color={theme.secondary}
         />

src/components/Menu/Row.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
 import React, { useMemo } from 'react'
 import { StyleSheet, Switch, Text, View } from 'react-native'
-import { Chase } from 'react-native-animated-spinkit'
+import { Flow } from 'react-native-animated-spinkit'
 import { State, TapGestureHandler } from 'react-native-gesture-handler'
 
 export interface Props {
@@ -45,7 +45,7 @@ const MenuRow: React.FC<Props> = ({
   const loadingSpinkit = useMemo(
     () => (
       <View style={{ position: 'absolute' }}>
-        <Chase
+        <Flow
           size={StyleConstants.Font.Size.M * 1.25}
           color={theme.secondary}
         />

src/components/Timeline/Conversation.tsx

@@ -92,6 +92,7 @@ const TimelineConversation: React.FC<Props> = ({
     <Pressable
       style={[
         styles.base,
+        { backgroundColor: theme.background },
         conversation.unread && {
           borderLeftWidth: StyleConstants.Spacing.XS,
           borderLeftColor: theme.blue,

src/components/Timeline/Default.tsx

@@ -1,17 +1,18 @@
 import analytics from '@components/analytics'
-import TimelineActioned from '@components/Timelines/Timeline/Shared/Actioned'
-import TimelineActions from '@components/Timelines/Timeline/Shared/Actions'
-import TimelineAttachment from '@components/Timelines/Timeline/Shared/Attachment'
-import TimelineAvatar from '@components/Timelines/Timeline/Shared/Avatar'
-import TimelineCard from '@components/Timelines/Timeline/Shared/Card'
-import TimelineContent from '@components/Timelines/Timeline/Shared/Content'
-import TimelineHeaderDefault from '@components/Timelines/Timeline/Shared/HeaderDefault'
-import TimelinePoll from '@components/Timelines/Timeline/Shared/Poll'
+import TimelineActioned from '@components/Timeline/Shared/Actioned'
+import TimelineActions from '@components/Timeline/Shared/Actions'
+import TimelineAttachment from '@components/Timeline/Shared/Attachment'
+import TimelineAvatar from '@components/Timeline/Shared/Avatar'
+import TimelineCard from '@components/Timeline/Shared/Card'
+import TimelineContent from '@components/Timeline/Shared/Content'
+import TimelineHeaderDefault from '@components/Timeline/Shared/HeaderDefault'
+import TimelinePoll from '@components/Timeline/Shared/Poll'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getLocalAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
@@ -34,6 +35,7 @@ const TimelineDefault: React.FC<Props> = ({
   disableDetails = false,
   disableOnPress = false
 }) => {
+  const { theme } = useTheme()
   const localAccount = useSelector(getLocalAccount)
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
@@ -57,6 +59,7 @@ const TimelineDefault: React.FC<Props> = ({
       style={[
         styles.statusView,
         {
+          backgroundColor: theme.background,
           paddingBottom:
             disableDetails && disableOnPress
               ? StyleConstants.Spacing.Global.PagePadding
@@ -90,13 +93,14 @@ const TimelineDefault: React.FC<Props> = ({
             : StyleConstants.Avatar.M + StyleConstants.Spacing.S
         }}
       >
-        {actualStatus.content.length > 0 && (
-          <TimelineContent
-            status={actualStatus}
-            highlighted={highlighted}
-            disableDetails={disableDetails}
-          />
-        )}
+        {typeof actualStatus.content === 'string' &&
+          actualStatus.content.length > 0 && (
+            <TimelineContent
+              status={actualStatus}
+              highlighted={highlighted}
+              disableDetails={disableDetails}
+            />
+          )}
         {queryKey && actualStatus.poll ? (
           <TimelinePoll
             queryKey={queryKey}

src/components/Timeline/Empty.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
-import { Chase } from 'react-native-animated-spinkit'
+import { Circle } from 'react-native-animated-spinkit'
 import { QueryStatus } from 'react-query'
 
 export interface Props {
@@ -22,7 +22,7 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
     switch (status) {
       case 'loading':
         return (
-          <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
+          <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
         )
       case 'error':
         return (
@@ -60,7 +60,12 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
         )
     }
   }, [mode, i18n.language, status])
-  return <View style={styles.base} children={children} />
+  return (
+    <View
+      style={[styles.base, { backgroundColor: theme.background }]}
+      children={children}
+    />
+  )
 }
 
 const styles = StyleSheet.create({

src/components/Timeline/End.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Trans } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
-import { Chase } from 'react-native-animated-spinkit'
+import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
   hasNextPage?: boolean
@@ -16,7 +16,7 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
   return (
     <View style={styles.base}>
       {hasNextPage ? (
-        <Chase size={StyleConstants.Font.Size.L} color={theme.secondary} />
+        <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
       ) : (
         <Text style={[styles.text, { color: theme.secondary }]}>
           <Trans

src/components/Timeline/Notifications.tsx

@@ -1,17 +1,18 @@
 import analytics from '@components/analytics'
-import TimelineActioned from '@components/Timelines/Timeline/Shared/Actioned'
-import TimelineActions from '@components/Timelines/Timeline/Shared/Actions'
-import TimelineAttachment from '@components/Timelines/Timeline/Shared/Attachment'
-import TimelineAvatar from '@components/Timelines/Timeline/Shared/Avatar'
-import TimelineCard from '@components/Timelines/Timeline/Shared/Card'
-import TimelineContent from '@components/Timelines/Timeline/Shared/Content'
-import TimelineHeaderNotification from '@components/Timelines/Timeline/Shared/HeaderNotification'
-import TimelinePoll from '@components/Timelines/Timeline/Shared/Poll'
+import TimelineActioned from '@components/Timeline/Shared/Actioned'
+import TimelineActions from '@components/Timeline/Shared/Actions'
+import TimelineAttachment from '@components/Timeline/Shared/Attachment'
+import TimelineAvatar from '@components/Timeline/Shared/Avatar'
+import TimelineCard from '@components/Timeline/Shared/Card'
+import TimelineContent from '@components/Timeline/Shared/Content'
+import TimelineHeaderNotification from '@components/Timeline/Shared/HeaderNotification'
+import TimelinePoll from '@components/Timeline/Shared/Poll'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getLocalAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
@@ -27,6 +28,7 @@ const TimelineNotifications: React.FC<Props> = ({
   queryKey,
   highlighted = false
 }) => {
+  const { theme } = useTheme()
   const localAccount = useSelector(getLocalAccount)
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
@@ -44,12 +46,17 @@ const TimelineNotifications: React.FC<Props> = ({
   }, [])
 
   return (
-    <Pressable style={styles.notificationView} onPress={onPress}>
-      <TimelineActioned
-        action={notification.type}
-        account={notification.account}
-        notification
-      />
+    <Pressable
+      style={[styles.notificationView, { backgroundColor: theme.background }]}
+      onPress={onPress}
+    >
+      {notification.type !== 'mention' ? (
+        <TimelineActioned
+          action={notification.type}
+          account={notification.account}
+          notification
+        />
+      ) : null}
 
       <View
         style={{

src/components/Timeline/Refresh.tsx

@@ -0,0 +1,36 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Circle } from 'react-native-animated-spinkit'
+
+export interface Props {
+  isLoading: boolean
+  disable?: boolean
+}
+
+const TimelineRefresh: React.FC<Props> = ({ isLoading, disable = false }) => {
+  const { theme } = useTheme()
+  return !isLoading && !disable ? (
+    <View
+      style={styles.base}
+      children={
+        <Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
+      }
+    />
+  ) : null
+}
+
+const styles = StyleSheet.create({
+  base: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: StyleConstants.Spacing.XL,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+})
+
+export default TimelineRefresh

src/components/Timeline/Shared/Attachment.tsx

@@ -1,17 +1,16 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
-import AttachmentAudio from '@components/Timelines/Timeline/Shared/Attachment/Audio'
-import AttachmentImage from '@components/Timelines/Timeline/Shared/Attachment/Image'
-import AttachmentUnsupported from '@components/Timelines/Timeline/Shared/Attachment/Unsupported'
-import AttachmentVideo from '@components/Timelines/Timeline/Shared/Attachment/Video'
+import AttachmentAudio from '@components/Timeline/Shared/Attachment/Audio'
+import AttachmentImage from '@components/Timeline/Shared/Attachment/Image'
+import AttachmentUnsupported from '@components/Timeline/Shared/Attachment/Unsupported'
+import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
-import { IImageInfo } from 'react-native-image-zoom-viewer/built/image-viewer.type'
 
 export interface Props {
   status: Pick<Mastodon.Status, 'media_attachments' | 'sensitive'>