perf: Optimize Global Search Performance (#1255)

* Faster and less laggy global search - Memoise each row in the search results page - Limit number of concurrent searches (has setting, defaults to 5 sources at once) - Load sources in the same order as they show in menu so from the user's pov it loads in faster - Cancel search when u close global search - Made the order of sources that are still loading follow the sorted order so theres less popin - Added setting to remove animations from the loading placeholders - Pause global search if u open a sub window (eg opening a novel) - Change no results color to look less active * Cancel previous global search when starting another * Dont clear global search on unfocus
LNReader · Nov 4, 2024 · 445187c · 445187c
1 parent 52ec11a
commit 445187c
Show file tree

Hide file tree

Showing 20 changed files with 410 additions and 161 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -7,4 +7,5 @@ module.exports = {
   trailingComma: 'all',
   arrowParens: 'avoid',
   quoteProps: 'preserve',
+  endOfLine: 'auto', // stop prettier from getting mad on windows
 };
diff --git a/src/hooks/common/useSearch.ts b/src/hooks/common/useSearch.ts
@@ -1,16 +1,18 @@
 import { useIsFocused } from '@react-navigation/native';
 import { useCallback, useEffect, useState } from 'react';
 
-const useSearch = (defaultSearchText?: string) => {
+const useSearch = (defaultSearchText?: string, clearSearchOnUnfocus = true) => {
   const isFocused = useIsFocused();
 
   const [searchText, setSearchText] = useState<string>(defaultSearchText || '');
 
   const clearSearchbar = useCallback(() => setSearchText(''), []);
 
   useEffect(() => {
-    if (!isFocused) {
-      clearSearchbar();
+    if (clearSearchOnUnfocus) {
+      if (!isFocused) {
+        clearSearchbar();
+      }
     }
   }, [isFocused, clearSearchbar]);
 

diff --git a/src/hooks/persisted/useSettings.ts b/src/hooks/persisted/useSettings.ts
@@ -28,6 +28,7 @@ export interface AppSettings {
   showUpdatesTab: boolean;
   showLabelsInNav: boolean;
   useFabForContinueReading: boolean;
+  disableLoadingAnimations: boolean;
 
   /**
    * Library settings
@@ -56,6 +57,7 @@ export interface AppSettings {
 export interface BrowseSettings {
   showMyAnimeList: boolean;
   showAniList: boolean;
+  globalSearchConcurrency?: number;
 }
 
 export interface LibrarySettings {
@@ -132,6 +134,7 @@ const initialAppSettings: AppSettings = {
   showUpdatesTab: true,
   showLabelsInNav: true,
   useFabForContinueReading: false,
+  disableLoadingAnimations: false,
 
   /**
    * Library settings
@@ -160,6 +163,7 @@ const initialAppSettings: AppSettings = {
 const initialBrowseSettings: BrowseSettings = {
   showMyAnimeList: true,
   showAniList: true,
+  globalSearchConcurrency: 1,
 };
 
 export const initialChapterGeneralSettings: ChapterGeneralSettings = {

diff --git a/src/navigators/Main.tsx b/src/navigators/Main.tsx
@@ -31,7 +31,7 @@ import MigrateNovel from '../screens/browse/migration/MigrationNovels';
 import MalTopNovels from '../screens/browse/discover/MalTopNovels';
 import AniListTopNovels from '../screens/browse/discover/AniListTopNovels';
 import NewUpdateDialog from '../components/NewUpdateDialog';
-import BrowseSettings from '../screens/browse/BrowseSettings';
+import BrowseSettings from '../screens/browse/settings/BrowseSettings';
 import WebviewScreen from '@screens/WebviewScreen/WebviewScreen';
 import { RootStackParamList } from './types';
 import Color from 'color';

diff --git a/src/screens/Categories/components/CategorySkeletonLoading.tsx b/src/screens/Categories/components/CategorySkeletonLoading.tsx
@@ -4,6 +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 { useAppSettings } from '@hooks/persisted/index';
 
 interface Props {
   width: number;
@@ -12,6 +13,7 @@ interface Props {
 }
 
 const CategorySkeletonLoading: React.FC<Props> = ({ height, width, theme }) => {
+  const { disableLoadingAnimations } = useAppSettings();
   const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
 
   const [highlightColor, backgroundColor] = getLoadingColors(theme);
@@ -24,6 +26,7 @@ const CategorySkeletonLoading: React.FC<Props> = ({ height, width, theme }) => {
           shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
           height={height}
           width={width}
+          stopAutoRun={disableLoadingAnimations}
         />
       </View>
     );

diff --git a/src/screens/GlobalSearchScreen/GlobalSearchScreen.tsx b/src/screens/GlobalSearchScreen/GlobalSearchScreen.tsx
@@ -23,6 +23,7 @@ const GlobalSearchScreen = (props: Props) => {
   const theme = useTheme();
   const { searchText, setSearchText, clearSearchbar } = useSearch(
     props?.route?.params?.searchText,
+    false,
   );
   const onChangeText = (text: string) => setSearchText(text);
   const onSubmitEditing = () => globalSearch(searchText);

diff --git a/src/screens/GlobalSearchScreen/components/GlobalSearchResultsList.tsx b/src/screens/GlobalSearchScreen/components/GlobalSearchResultsList.tsx
@@ -13,8 +13,9 @@ import { GlobalSearchResult } from '../hooks/useGlobalSearch';
 import GlobalSearchNovelItem from './GlobalSearchNovelItem';
 import { useLibraryNovels } from '@screens/library/hooks/useLibrary';
 import { LibraryNovelInfo } from '@database/types';
-import GlobalSearchSkeletonLoading from '@screens/browse/loadingAnimation/GlobalSearchSkeletonLoading';
 import { switchNovelToLibrary } from '@database/queries/NovelQueries';
+import GlobalSearchSkeletonLoading from '@screens/browse/loadingAnimation/GlobalSearchSkeletonLoading';
+import { interpolateColor } from 'react-native-reanimated';
 
 interface GlobalSearchResultsListProps {
   searchResults: GlobalSearchResult[];
@@ -25,130 +26,138 @@ const GlobalSearchResultsList: React.FC<GlobalSearchResultsListProps> = ({
   searchResults,
   ListEmptyComponent,
 }) => {
-  const theme = useTheme();
-  const navigation = useNavigation<StackNavigationProp<any>>();
   const keyExtractor = useCallback(
     (item: GlobalSearchResult) => item.plugin.id,
     [],
   );
+
+  return (
+    <FlatList<GlobalSearchResult>
+      keyExtractor={keyExtractor}
+      data={searchResults}
+      contentContainerStyle={styles.resultList}
+      renderItem={({ item }) => <GlobalSearchSourceResults item={item} />}
+      ListEmptyComponent={ListEmptyComponent}
+    />
+  );
+};
+
+const GlobalSearchSourceResults: React.FC<{ item: GlobalSearchResult }> = ({
+  item,
+}) => {
+  const theme = useTheme();
+  const navigation = useNavigation<StackNavigationProp<any>>();
   const { library, setLibrary } = useLibraryNovels();
 
   const novelInLibrary = (pluginId: string, novelPath: string) =>
     library?.some(
       novel => novel.pluginId === pluginId && novel.path === novelPath,
     );
 
-  const errorColor = useMemo(() => (theme.isDark ? '#B3261E' : '#F2B8B5'), []);
+  const errorColor = theme.isDark ? '#B3261E' : '#F2B8B5';
+  const noResultsColor = interpolateColor(
+    0.8,
+    [0, 1],
+    ['transparent', theme.onSurfaceVariant],
+  );
 
   const navigateToNovel = useCallback(
     (item: { name: string; path: string; pluginId: string }) =>
       navigation.push('Novel', item),
     [],
   );
 
-  return (
-    <FlatList<GlobalSearchResult>
-      keyExtractor={keyExtractor}
-      data={searchResults}
-      contentContainerStyle={styles.resultList}
-      renderItem={({ item }) => (
-        <>
-          <View>
-            <Pressable
-              android_ripple={{
-                color: color(theme.primary).alpha(0.12).string(),
-              }}
-              style={styles.sourceHeader}
-              onPress={() =>
-                navigation.navigate('SourceScreen', {
-                  pluginId: item.plugin.id,
-                  pluginName: item.plugin.name,
-                  site: item.plugin.site,
-                })
-              }
-            >
-              <View>
-                <Text style={[styles.sourceName, { color: theme.onSurface }]}>
-                  {item.plugin.name}
-                </Text>
-                <Text
-                  style={[styles.language, { color: theme.onSurfaceVariant }]}
-                >
-                  {item.plugin.lang}
-                </Text>
-              </View>
-              <MaterialCommunityIcons
-                name="arrow-right"
-                size={24}
-                color={theme.onSurface}
-              />
-            </Pressable>
-            {item.isLoading ? (
-              <GlobalSearchSkeletonLoading theme={theme} />
-            ) : item.error ? (
-              <Text style={[styles.error, { color: errorColor }]}>
-                {item.error}
+  return useMemo(
+    () => (
+      <>
+        <View>
+          <Pressable
+            android_ripple={{
+              color: color(theme.primary).alpha(0.12).string(),
+            }}
+            style={styles.sourceHeader}
+            onPress={() =>
+              navigation.navigate('SourceScreen', {
+                pluginId: item.plugin.id,
+                pluginName: item.plugin.name,
+                site: item.plugin.site,
+              })
+            }
+          >
+            <View>
+              <Text style={[styles.sourceName, { color: theme.onSurface }]}>
+                {item.plugin.name}
               </Text>
-            ) : (
-              <FlatList
-                horizontal
-                contentContainerStyle={styles.novelsContainer}
-                keyExtractor={novelItem =>
-                  item.plugin.id + '_' + novelItem.path
-                }
-                data={item.novels}
-                ListEmptyComponent={
-                  <Text
-                    style={[
-                      styles.listEmpty,
-                      { color: theme.onSurfaceVariant },
-                    ]}
-                  >
-                    {getString('sourceScreen.noResultsFound')}
-                  </Text>
-                }
-                renderItem={({ item: novelItem }) => {
-                  const inLibrary = novelInLibrary(
-                    item.plugin.id,
-                    novelItem.path,
-                  );
+              <Text
+                style={[styles.language, { color: theme.onSurfaceVariant }]}
+              >
+                {item.plugin.lang}
+              </Text>
+            </View>
+            <MaterialCommunityIcons
+              name="arrow-right"
+              size={24}
+              color={theme.onSurface}
+            />
+          </Pressable>
+          {item.isLoading ? (
+            <GlobalSearchSkeletonLoading theme={theme} />
+          ) : item.error ? (
+            <Text style={[styles.error, { color: errorColor }]}>
+              {item.error}
+            </Text>
+          ) : (
+            <FlatList
+              horizontal
+              contentContainerStyle={styles.novelsContainer}
+              keyExtractor={novelItem => item.plugin.id + '_' + novelItem.path}
+              data={item.novels}
+              ListEmptyComponent={
+                <Text style={[styles.listEmpty, { color: noResultsColor }]}>
+                  {getString('sourceScreen.noResultsFound')}
+                </Text>
+              }
+              renderItem={({ item: novelItem }) => {
+                const inLibrary = novelInLibrary(
+                  item.plugin.id,
+                  novelItem.path,
+                );
 
-                  return (
-                    <GlobalSearchNovelItem
-                      novel={novelItem}
-                      pluginId={item.plugin.id}
-                      inLibrary={inLibrary}
-                      navigateToNovel={navigateToNovel}
-                      theme={theme}
-                      onLongPress={() => {
-                        setLibrary(prevValues => {
-                          if (inLibrary) {
-                            return [
-                              ...prevValues.filter(
-                                novel => novel.path !== novelItem.path,
-                              ),
-                            ];
-                          } else {
-                            return [
-                              ...prevValues,
-                              {
-                                path: novelItem.path,
-                              } as LibraryNovelInfo,
-                            ];
-                          }
-                        });
-                        switchNovelToLibrary(novelItem.path, item.plugin.id);
-                      }}
-                    />
-                  );
-                }}
-              />
-            )}
-          </View>
-        </>
-      )}
-      ListEmptyComponent={ListEmptyComponent}
-    />
+                return (
+                  <GlobalSearchNovelItem
+                    novel={novelItem}
+                    pluginId={item.plugin.id}
+                    inLibrary={inLibrary}
+                    navigateToNovel={navigateToNovel}
+                    theme={theme}
+                    onLongPress={() => {
+                      setLibrary(prevValues => {
+                        if (inLibrary) {
+                          return [
+                            ...prevValues.filter(
+                              novel => novel.path !== novelItem.path,
+                            ),
+                          ];
+                        } else {
+                          return [
+                            ...prevValues,
+                            {
+                              path: novelItem.path,
+                            } as LibraryNovelInfo,
+                          ];
+                        }
+                      });
+                      switchNovelToLibrary(novelItem.path, item.plugin.id);
+                    }}
+                  />
+                );
+              }}
+            />
+          )}
+        </View>
+      </>
+    ),
+    [item.isLoading],
   );
 };