diff --git a/package.json b/package.json index 4be79694..2dfb17f7 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 7c81f55e..bcf90e21 100644 --- a/src/components/Button.tsx +++ b/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 = ({ const loadingSpinkit = () => loading ? ( - + ) : null diff --git a/src/components/Header/Right.tsx b/src/components/Header/Right.tsx index 2b799d08..e0f460a0 100644 --- a/src/components/Header/Right.tsx +++ b/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 = ({ const loadingSpinkit = () => loading ? ( - + ) : null diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 00000000..9307f35a --- /dev/null +++ b/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 = ({ size = 'small', ...rest }) => { + const { colors } = useTheme() + + return +} diff --git a/src/components/Menu/Row.tsx b/src/components/Menu/Row.tsx index c360071f..2fcc8fbc 100644 --- a/src/components/Menu/Row.tsx +++ b/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 = ({ ) : null} {loading ? ( - + ) : null} diff --git a/src/components/Timeline/Empty.tsx b/src/components/Timeline/Empty.tsx index e948f343..5fe79703 100644 --- a/src/components/Timeline/Empty.tsx +++ b/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 = ({ queryKey }) => { const children = () => { switch (status) { case 'loading': - return + return case 'error': return ( <> diff --git a/src/components/Timeline/Footer.tsx b/src/components/Timeline/Footer.tsx index 391c498f..db50cc12 100644 --- a/src/components/Timeline/Footer.tsx +++ b/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 = ({ queryKey, disableInfinity }) => { }} > {!disableInfinity && hasNextPage ? ( - + ) : ( { @@ -111,13 +111,7 @@ const TimelineTranslate = () => { }) : t('componentTimeline:shared.translate.default')} - {isFetching ? ( - - ) : null} + {isFetching ? : null} {devView()} {data && data.error === undefined diff --git a/src/i18n/en/screens/tabs.json b/src/i18n/en/screens/tabs.json index d4dd8466..051ab6e5 100644 --- a/src/i18n/en/screens/tabs.json +++ b/src/i18n/en/screens/tabs.json @@ -373,7 +373,8 @@ "hashtags": "Hashtag", "statuses": "Toot" }, - "notFound": "Cannot find {{searchTerm}} related {{type}}" + "notFound": "Cannot find {{searchTerm}} related {{type}}", + "noResult": "Cannot find anything, please try a different term" }, "toot": { "name": "Discussions", diff --git a/src/screens/Announcements.tsx b/src/screens/Announcements.tsx index 681feb41..f52b3019 100644 --- a/src/screens/Announcements.tsx +++ b/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 const ListEmptyComponent = () => { return ( - - + + ) } diff --git a/src/screens/Compose/Root/Footer/Attachments.tsx b/src/screens/Compose/Root/Footer/Attachments.tsx index 611e1685..008345c6 100644 --- a/src/screens/Compose/Root/Footer/Attachments.tsx +++ b/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 = ({ accessibleRefAttachments }) => { backgroundColor: colors.backgroundOverlayInvert }} > - + ) : ( { key='listEmpty' style={{ flex: 1, alignItems: 'center', marginVertical: StyleConstants.Spacing.M }} > - + ) : ( <>{main()} diff --git a/src/screens/Tabs/Shared/Search/Empty.tsx b/src/screens/Tabs/Shared/Search/Empty.tsx index af8ff166..1d5b4b9b 100644 --- a/src/screens/Tabs/Shared/Search/Empty.tsx +++ b/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 { Circle } from 'react-native-animated-spinkit' +import { StyleSheet, View } from 'react-native' export interface Props { isFetching: boolean - inputRef: React.RefObject - setSearchTerm: React.Dispatch> + searchTerm: string } -const SearchEmpty: React.FC = ({ isFetching, inputRef, setSearchTerm }) => { +const SearchEmpty: React.FC = ({ isFetching, searchTerm }) => { const { colors } = useTheme() const { t } = useTranslation('screenTabs') const trendsTags = useTrendsQuery({ type: 'tags' }) return ( - + {isFetching ? ( - - + + + + ) : searchTerm.length ? ( + + ) : ( <> diff --git a/src/screens/Tabs/Shared/Search/index.tsx b/src/screens/Tabs/Shared/Search/index.tsx index 89c530d0..d06e239e 100644 --- a/src/screens/Tabs/Shared/Search/index.tsx +++ b/src/screens/Tabs/Shared/Search/index.tsx @@ -131,7 +131,6 @@ const TabSharedSearch: React.FC> style={{ flex: 1 }} > { switch (section.title) { @@ -146,9 +145,7 @@ const TabSharedSearch: React.FC> } }} stickySectionHeadersEnabled - ListEmptyComponent={ - - } + ListEmptyComponent={} keyboardShouldPersistTaps='always' renderSectionHeader={({ section: { translation } }) => ( > = ({ @@ -109,7 +109,7 @@ const TabSharedToot: React.FC> = ({ } }, { - 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> = ({ } } ) - useQuery( + const remoteQuery = useQuery( queryKey.remote, async () => { const domain = match?.domain @@ -446,18 +446,9 @@ const TabSharedToot: React.FC> = ({ ) }} ListFooterComponent={ - - {query.isLoading ? ( - - ) : null} - + query.isFetching || remoteQuery.isFetching ? ( + } /> + ) : null } {...(loaded.current && { maintainVisibleContentPosition: { minIndexForVisible: 0 } })} {...(Platform.OS !== 'ios' && { diff --git a/src/screens/Tabs/Shared/Users.tsx b/src/screens/Tabs/Shared/Users.tsx index e161b1f8..b2994a6e 100644 --- a/src/screens/Tabs/Shared/Users.tsx +++ b/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> = ({ @@ -36,7 +36,7 @@ const TabSharedUsers: React.FC> = ...queryKey[1] }) - const [isSearching, setIsSearching] = useState(false) + const [isSearching, setIsSearching] = useState(null) return ( > = minHeight: '100%', paddingVertical: StyleConstants.Spacing.Global.PagePadding }} - renderItem={({ item }) => ( + renderItem={({ item, index }) => ( { if (data?.pages[0]?.remoteData) { - setIsSearching(true) + setIsSearching(index) apiInstance({ version: 'v2', method: 'get', @@ -66,18 +66,18 @@ const TabSharedUsers: React.FC> = } }) .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={} + children={} /> )} onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()} @@ -93,7 +93,7 @@ const TabSharedUsers: React.FC> = alignItems: 'center' }} > - + ) : null } diff --git a/yarn.lock b/yarn.lock index ef1812a4..224235d5 100644 --- a/yarn.lock +++ b/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