From 5f1498cdea7445bc6544dcdd73ff0cb3fa6d9229 Mon Sep 17 00:00:00 2001 From: Soopyboo32 <49228220+Soopyboo32@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:32:55 +0800 Subject: [PATCH 1/2] Small changes following faster global search pr --- src/hooks/persisted/useSettings.ts | 2 +- .../components/CategorySkeletonLoading.tsx | 4 +-- .../GlobalSearchSkeletonLoading.tsx | 4 +-- .../browse/loadingAnimation/MalLoading.tsx | 4 +-- .../SourceScreenSkeletonLoading.tsx | 4 +-- .../loadingAnimation/TrackerLoading.tsx | 4 +-- .../components/HistorySkeletonLoading.tsx | 4 +-- .../LoadingAnimation/NovelScreenLoading.tsx | 10 +++--- .../components/UpdatesSkeletonLoading.tsx | 4 +-- src/utils/getLoadingColors.ts | 21 ------------ src/utils/useLoadingColors.ts | 34 +++++++++++++++++++ 11 files changed, 54 insertions(+), 41 deletions(-) delete mode 100644 src/utils/getLoadingColors.ts create mode 100644 src/utils/useLoadingColors.ts diff --git a/src/hooks/persisted/useSettings.ts b/src/hooks/persisted/useSettings.ts index cd59ff73f..de8f1fbb3 100644 --- a/src/hooks/persisted/useSettings.ts +++ b/src/hooks/persisted/useSettings.ts @@ -163,7 +163,7 @@ const initialAppSettings: AppSettings = { const initialBrowseSettings: BrowseSettings = { showMyAnimeList: true, showAniList: true, - globalSearchConcurrency: 1, + globalSearchConcurrency: 3, }; export const initialChapterGeneralSettings: ChapterGeneralSettings = { diff --git a/src/screens/Categories/components/CategorySkeletonLoading.tsx b/src/screens/Categories/components/CategorySkeletonLoading.tsx index a45efb18a..2c0bdbd87 100644 --- a/src/screens/Categories/components/CategorySkeletonLoading.tsx +++ b/src/screens/Categories/components/CategorySkeletonLoading.tsx @@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'; import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'; import { LinearGradient } from 'expo-linear-gradient'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { useAppSettings } from '@hooks/persisted/index'; interface Props { @@ -16,7 +16,7 @@ const CategorySkeletonLoading: React.FC = ({ height, width, theme }) => { const { disableLoadingAnimations } = useAppSettings(); const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const renderLoadingCard = (item: number, index: number) => { return ( diff --git a/src/screens/browse/loadingAnimation/GlobalSearchSkeletonLoading.tsx b/src/screens/browse/loadingAnimation/GlobalSearchSkeletonLoading.tsx index 6e2563b64..de610d29a 100644 --- a/src/screens/browse/loadingAnimation/GlobalSearchSkeletonLoading.tsx +++ b/src/screens/browse/loadingAnimation/GlobalSearchSkeletonLoading.tsx @@ -2,7 +2,7 @@ import React, { memo } from 'react'; import { View, StyleSheet } from 'react-native'; import { ThemeColors } from '@theme/types'; import LoadingNovel from './LoadingNovel'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { DisplayModes } from '@screens/library/constants/constants'; interface Props { @@ -12,7 +12,7 @@ interface Props { const GlobalSearchSkeletonLoading: React.FC = ({ theme }) => { const styles = createStyleSheet(); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const items: Array = [1, 2, 3, 4]; return ( diff --git a/src/screens/browse/loadingAnimation/MalLoading.tsx b/src/screens/browse/loadingAnimation/MalLoading.tsx index 9e17099f4..8a393ad3f 100644 --- a/src/screens/browse/loadingAnimation/MalLoading.tsx +++ b/src/screens/browse/loadingAnimation/MalLoading.tsx @@ -4,7 +4,7 @@ import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'; import { LinearGradient } from 'expo-linear-gradient'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { useAppSettings } from '@hooks/persisted/index'; interface Props { @@ -16,7 +16,7 @@ const MalLoading: React.FC = ({ theme }) => { const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient); const styles = createStyleSheet(theme); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const renderLoadingRect = (item: number, index: number) => { let randomNumber = Math.random(); diff --git a/src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx b/src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx index 6bba1ae91..94f6b801c 100644 --- a/src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx +++ b/src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx @@ -1,7 +1,7 @@ import React, { memo, useMemo } from 'react'; import { View, StyleSheet, useWindowDimensions } from 'react-native'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import LoadingNovel from '@screens/browse/loadingAnimation/LoadingNovel'; import { useLibrarySettings } from '@hooks/persisted'; import { DisplayModes } from '@screens/library/constants/constants'; @@ -16,7 +16,7 @@ const SourceScreenSkeletonLoading: React.FC = ({ theme, completeRow, }) => { - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const { displayMode = DisplayModes.Comfortable, novelsPerRow = 3 } = useLibrarySettings(); diff --git a/src/screens/browse/loadingAnimation/TrackerLoading.tsx b/src/screens/browse/loadingAnimation/TrackerLoading.tsx index 9e17099f4..8a393ad3f 100644 --- a/src/screens/browse/loadingAnimation/TrackerLoading.tsx +++ b/src/screens/browse/loadingAnimation/TrackerLoading.tsx @@ -4,7 +4,7 @@ import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'; import { LinearGradient } from 'expo-linear-gradient'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { useAppSettings } from '@hooks/persisted/index'; interface Props { @@ -16,7 +16,7 @@ const MalLoading: React.FC = ({ theme }) => { const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient); const styles = createStyleSheet(theme); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const renderLoadingRect = (item: number, index: number) => { let randomNumber = Math.random(); diff --git a/src/screens/history/components/HistorySkeletonLoading.tsx b/src/screens/history/components/HistorySkeletonLoading.tsx index f093e5bbe..8909fdd61 100644 --- a/src/screens/history/components/HistorySkeletonLoading.tsx +++ b/src/screens/history/components/HistorySkeletonLoading.tsx @@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'; import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'; import { LinearGradient } from 'expo-linear-gradient'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { useAppSettings } from '@hooks/persisted/index'; interface Props { @@ -13,7 +13,7 @@ interface Props { const HistorySkeletonLoading: React.FC = ({ theme }) => { const { disableLoadingAnimations } = useAppSettings(); const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const renderLoadingChapter = (index: number) => ( diff --git a/src/screens/novel/components/LoadingAnimation/NovelScreenLoading.tsx b/src/screens/novel/components/LoadingAnimation/NovelScreenLoading.tsx index 39d45ced4..de799b164 100644 --- a/src/screens/novel/components/LoadingAnimation/NovelScreenLoading.tsx +++ b/src/screens/novel/components/LoadingAnimation/NovelScreenLoading.tsx @@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native'; import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'; import { LinearGradient } from 'expo-linear-gradient'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { useAppSettings, useTheme } from '@hooks/persisted/index'; interface Props { @@ -22,7 +22,7 @@ const LoadingShimmer = memo( }) => { const { disableLoadingAnimations } = useAppSettings(); const theme = useTheme(); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient); return ( @@ -68,7 +68,7 @@ const NovelInformation = memo(() => ( )); -const ChapterItem = memo(({ index }: { index: number }) => ( +const ChapterItem = memo(() => ( @@ -83,12 +83,12 @@ const Chapters = memo(() => ( width={350} /> {[...Array(7)].map((_, i) => ( - + ))} )); -const NovelScreenLoading: React.FC = ({ theme }) => { +const NovelScreenLoading: React.FC = () => { return ( diff --git a/src/screens/updates/components/UpdatesSkeletonLoading.tsx b/src/screens/updates/components/UpdatesSkeletonLoading.tsx index c9fd9fee9..ca7415d5a 100644 --- a/src/screens/updates/components/UpdatesSkeletonLoading.tsx +++ b/src/screens/updates/components/UpdatesSkeletonLoading.tsx @@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'; import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'; import { LinearGradient } from 'expo-linear-gradient'; import { ThemeColors } from '@theme/types'; -import getLoadingColors from '@utils/getLoadingColors'; +import useLoadingColors from '@utils/useLoadingColors'; import { useAppSettings } from '@hooks/persisted/index'; interface Props { @@ -14,7 +14,7 @@ const UpdatesSkeletonLoading: React.FC = ({ theme }) => { const { disableLoadingAnimations } = useAppSettings(); const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient); - const [highlightColor, backgroundColor] = getLoadingColors(theme); + const [highlightColor, backgroundColor] = useLoadingColors(theme); const renderLoadingChapter = (item: number, index: number) => { return ( diff --git a/src/utils/getLoadingColors.ts b/src/utils/getLoadingColors.ts deleted file mode 100644 index 58f22b305..000000000 --- a/src/utils/getLoadingColors.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ThemeColors } from '@theme/types'; -import color from 'color'; - -const getLoadingColors = (theme: ThemeColors) => { - const highlightColor = color(theme.primary).alpha(0.08).string(); - const backgroundColor = color(theme.surface); - - let adjustedBackgroundColor; - - if (backgroundColor.isDark()) { - adjustedBackgroundColor = - backgroundColor.luminosity() !== 0 - ? backgroundColor.lighten(0.1).toString() - : backgroundColor.negate().darken(0.98).toString(); - } else { - adjustedBackgroundColor = backgroundColor.darken(0.04).toString(); - } - - return [highlightColor, adjustedBackgroundColor]; -}; -export default getLoadingColors; diff --git a/src/utils/useLoadingColors.ts b/src/utils/useLoadingColors.ts new file mode 100644 index 000000000..b40e37807 --- /dev/null +++ b/src/utils/useLoadingColors.ts @@ -0,0 +1,34 @@ +import { ThemeColors } from '@theme/types'; +import color from 'color'; +import { useAppSettings } from '@hooks/persisted'; +import { interpolateColor } from 'react-native-reanimated'; + +const useLoadingColors = (theme: ThemeColors) => { + const highlightColor = color(theme.primary).alpha(0.08).string(); + const backgroundColor = color(theme.surface); + + let adjustedBackgroundColor; + + if (backgroundColor.isDark()) { + adjustedBackgroundColor = + backgroundColor.luminosity() !== 0 + ? backgroundColor.lighten(0.1).toString() + : backgroundColor.negate().darken(0.98).toString(); + } else { + adjustedBackgroundColor = backgroundColor.darken(0.04).toString(); + } + + const { disableLoadingAnimations } = useAppSettings(); + + if (disableLoadingAnimations) { + //If loading animations is disabled highlight color is never shown so make background color more visible to compensate + adjustedBackgroundColor = interpolateColor( + 0.01, //I have no idea why the interpolation amount has to be so small, I think its cus of the massive difference in alpha + [0, 1], + [adjustedBackgroundColor, highlightColor], + ); + } + + return [highlightColor, adjustedBackgroundColor]; +}; +export default useLoadingColors; From defcf682216f3254c68339e3aa7b2002c4b4c665 Mon Sep 17 00:00:00 2001 From: Soopyboo32 <49228220+Soopyboo32@users.noreply.github.com> Date: Sun, 17 Nov 2024 20:17:11 +0800 Subject: [PATCH 2/2] Fix lint error --- src/screens/history/HistoryScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/history/HistoryScreen.tsx b/src/screens/history/HistoryScreen.tsx index 5f40155a5..93ddb1aad 100644 --- a/src/screens/history/HistoryScreen.tsx +++ b/src/screens/history/HistoryScreen.tsx @@ -15,9 +15,8 @@ import { History } from '@database/types'; import { getString } from '@strings/translations'; import ClearHistoryDialog from './components/ClearHistoryDialog'; import HistorySkeletonLoading from './components/HistorySkeletonLoading'; -import { HistoryScreenProps } from '@navigators/types'; -const HistoryScreen = ({ navigation }: HistoryScreenProps) => { +const HistoryScreen = () => { const theme = useTheme(); const { isLoading,