perf: Small changes following faster global search pr (#1320)

* Small changes following faster global search pr * Fix lint error
LNReader · Nov 25, 2024 · cdc4ddc · cdc4ddc
1 parent 8f783fd
commit cdc4ddc
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 43 deletions.
diff --git 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
@@ -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<Props> = ({ 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
@@ -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<Props> = ({ theme }) => {
   const styles = createStyleSheet();
 
-  const [highlightColor, backgroundColor] = getLoadingColors(theme);
+  const [highlightColor, backgroundColor] = useLoadingColors(theme);
 
   const items: Array<number> = [1, 2, 3, 4];
   return (

diff --git 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<Props> = ({ 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
@@ -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<Props> = ({
   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
@@ -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<Props> = ({ 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/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,

diff --git 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<Props> = ({ theme }) => {
   const { disableLoadingAnimations } = useAppSettings();
   const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
-  const [highlightColor, backgroundColor] = getLoadingColors(theme);
+  const [highlightColor, backgroundColor] = useLoadingColors(theme);
 
   const renderLoadingChapter = (index: number) => (
     <View key={`historyLoading${index}`}>

diff --git 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(() => (
   </View>
 ));
 
-const ChapterItem = memo(({ index }: { index: number }) => (
+const ChapterItem = memo(() => (
   <View style={styles.chapter}>
     <LoadingShimmer style={styles.text} height={20} width={350} />
     <LoadingShimmer style={styles.text} height={16} width={350} />
@@ -83,12 +83,12 @@ const Chapters = memo(() => (
       width={350}
     />
     {[...Array(7)].map((_, i) => (
-      <ChapterItem key={i} index={i} />
+      <ChapterItem key={i} />
     ))}
   </View>
 ));
 
-const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
+const NovelScreenLoading: React.FC<Props> = () => {
   return (
     <View style={styles.container}>
       <NovelTop />

diff --git 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<Props> = ({ 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
diff --git a/src/utils/useLoadingColors.ts 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;