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
2024-11-04 21:00:11 +08:00
parent 52ec11a33d
commit 445187cf11
20 changed files with 418 additions and 169 deletions
@@ -7,4 +7,5 @@ module.exports = {
  trailingComma: 'all',
  arrowParens: 'avoid',
  quoteProps: 'preserve',
+  endOfLine: 'auto', // stop prettier from getting mad on windows
 };
@@ -1,7 +1,7 @@
 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 || '');
@@ -9,8 +9,10 @@ const useSearch = (defaultSearchText?: string) => {
  const clearSearchbar = useCallback(() => setSearchText(''), []);

  useEffect(() => {
-    if (!isFocused) {
-      clearSearchbar();
+    if (clearSearchOnUnfocus) {
+      if (!isFocused) {
+        clearSearchbar();
+      }
    }
  }, [isFocused, clearSearchbar]);

@@ -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 = {
@@ -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';
@@ -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>
    );
@@ -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);
@@ -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,133 +26,141 @@ const GlobalSearchResultsList: React.FC<GlobalSearchResultsListProps> = ({
  searchResults,
  ListEmptyComponent,
 }) => {
-  const theme = useTheme();
-  const navigation = useNavigation<StackNavigationProp<any>>();
  const keyExtractor = useCallback(
    (item: GlobalSearchResult) => item.plugin.id,
    [],
  );
-  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 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}
-              </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,
-                  );
-
-                  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>
-        </>
-      )}
+      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 = 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 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>
+              <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>
+      </>
+    ),
+    [item.isLoading],
+  );
+};
+
 export default GlobalSearchResultsList;

 const styles = StyleSheet.create({
@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';

 import { NovelItem, PluginItem } from '@plugins/types';
 import { getPlugin } from '@plugins/pluginManager';
-import { usePlugins } from '@hooks/persisted';
+import { useBrowseSettings, usePlugins } from '@hooks/persisted';
+import { useFocusEffect } from '@react-navigation/native';

 interface Props {
  defaultSearchText?: string;
@@ -16,14 +17,35 @@ export interface GlobalSearchResult {
 }

 export const useGlobalSearch = ({ defaultSearchText }: Props) => {
-  const isMounted = useRef(true);
+  const isMounted = useRef(true); //if user closes the search screen, cancel the search
+  const isFocused = useRef(true); //if the user opens a sub-screen (e.g. novel screen), pause the search
+  const lastSearch = useRef(''); //if the user changes search, cancel running searches
+  useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    [],
+  );
+  useFocusEffect(
+    useCallback(() => {
+      isFocused.current = true;
+
+      return () => (isFocused.current = false);
+    }, []),
+  );

  const { filteredInstalledPlugins } = usePlugins();

  const [searchResults, setSearchResults] = useState<GlobalSearchResult[]>([]);
  const [progress, setProgress] = useState(0);

+  const { globalSearchConcurrency = 1 } = useBrowseSettings();
+
  const globalSearch = (searchText: string) => {
+    if (lastSearch.current === searchText) {
+      return;
+    }
+    lastSearch.current = searchText;
    const defaultResult: GlobalSearchResult[] = filteredInstalledPlugins.map(
      plugin => ({
        isLoading: true,
@@ -33,46 +55,33 @@ export const useGlobalSearch = ({ defaultSearchText }: Props) => {
      }),
    );

-    setSearchResults(defaultResult);
+    setSearchResults(defaultResult.sort(novelResultSorter));
+    setProgress(0);

-    filteredInstalledPlugins.forEach(async _plugin => {
-      if (isMounted.current) {
-        try {
-          const plugin = getPlugin(_plugin.id);
-          if (!plugin) {
-            throw new Error(`Unknown plugin: ${_plugin.id}`);
-          }
-          const res = await plugin.searchNovels(searchText, 1);
+    let running = 0;

-          setSearchResults(prevState =>
-            prevState.map(prevResult =>
+    async function searchInPlugin(_plugin: PluginItem) {
+      try {
+        const plugin = getPlugin(_plugin.id);
+        if (!plugin) {
+          throw new Error(`Unknown plugin: ${_plugin.id}`);
+        }
+        const res = await plugin.searchNovels(searchText, 1);
+
+        setSearchResults(prevState =>
+          prevState
+            .map(prevResult =>
              prevResult.plugin.id === plugin.id
                ? { ...prevResult, novels: res, isLoading: false }
                : { ...prevResult },
-            ),
-          );
-
-          setSearchResults(prevState =>
-            prevState.sort(
-              (
-                { novels: a, plugin: { name: aName } },
-                { novels: b, plugin: { name: bName } },
-              ) => {
-                if (!a.length) {
-                  return 1;
-                }
-                if (!b.length) {
-                  return -1;
-                }
-
-                return aName.localeCompare(bName);
-              },
-            ),
-          );
-        } catch (error: any) {
-          const errorMessage = error?.message || String(error);
-          setSearchResults(prevState =>
-            prevState.map(prevResult =>
+            )
+            .sort(novelResultSorter),
+        );
+      } catch (error: any) {
+        const errorMessage = error?.message || String(error);
+        setSearchResults(prevState =>
+          prevState
+            .map(prevResult =>
              prevResult.plugin.id === _plugin.id
                ? {
                    ...prevResult,
@@ -81,15 +90,57 @@ export const useGlobalSearch = ({ defaultSearchText }: Props) => {
                    error: errorMessage,
                  }
                : { ...prevResult },
-            ),
-          );
-        } finally {
-          setProgress(
-            prevState => prevState + 1 / filteredInstalledPlugins.length,
-          );
+            )
+            .sort(novelResultSorter),
+        );
+      }
+    }
+
+    //Sort so we load the plugins results in the same order as they show on the list
+    let filteredSortedInstalledPlugins = [...filteredInstalledPlugins].sort(
+      (a, b) => a.name.localeCompare(b.name),
+    );
+
+    (async () => {
+      if (globalSearchConcurrency > 1) {
+        for (let _plugin of filteredSortedInstalledPlugins) {
+          while (running >= globalSearchConcurrency || !isFocused.current) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+          }
+          if (!isMounted.current || lastSearch.current !== searchText) {
+            break;
+          }
+          running++;
+          searchInPlugin(_plugin)
+            .then(() => {
+              running--;
+              if (lastSearch.current === searchText) {
+                setProgress(
+                  prevState => prevState + 1 / filteredInstalledPlugins.length,
+                );
+              }
+            })
+            .catch(() => {
+              running--;
+            });
+        }
+      } else {
+        for (let _plugin of filteredSortedInstalledPlugins) {
+          if (!isMounted.current || lastSearch.current !== searchText) {
+            break;
+          }
+          while (!isFocused.current) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+          }
+          await searchInPlugin(_plugin);
+          if (lastSearch.current === searchText) {
+            setProgress(
+              prevState => prevState + 1 / filteredInstalledPlugins.length,
+            );
+          }
        }
      }
-    });
+    })();
  };

  useEffect(() => {
@@ -100,3 +151,20 @@ export const useGlobalSearch = ({ defaultSearchText }: Props) => {

  return { searchResults, globalSearch, progress };
 };
+
+function novelResultSorter(
+  { novels: a, plugin: { name: aName } }: GlobalSearchResult,
+  { novels: b, plugin: { name: bName } }: GlobalSearchResult,
+) {
+  if (!a.length && !b.length) {
+    return aName.localeCompare(bName);
+  }
+  if (!a.length) {
+    return 1;
+  }
+  if (!b.length) {
+    return -1;
+  }
+
+  return aName.localeCompare(bName);
+}
@@ -3,6 +3,7 @@ import { View, StyleSheet } from 'react-native';
 import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
 import { LinearGradient } from 'expo-linear-gradient';
 import { DisplayModes } from '@screens/library/constants/constants';
+import { useAppSettings } from '@hooks/persisted/index';

 interface Props {
  backgroundColor: string;
@@ -19,6 +20,7 @@ const LoadingNovel: React.FC<Props> = ({
  pictureWidth,
  displayMode,
 }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
  let randomNumber = Math.random();
  randomNumber < 0.1 ? (randomNumber = 0) : null;
@@ -35,6 +37,7 @@ const LoadingNovel: React.FC<Props> = ({
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={pictureHeight}
          width={pictureWidth}
+          stopAutoRun={disableLoadingAnimations}
        />
        {displayMode === 2 || displayMode === 0 ? null : (
          <>
@@ -43,12 +46,14 @@ const LoadingNovel: React.FC<Props> = ({
              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
              height={16}
              width={pictureWidth}
+              stopAutoRun={disableLoadingAnimations}
            />
            <ShimmerPlaceHolder
              style={styles.text}
              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
              height={16}
              width={randomNumber * pictureWidth}
+              stopAutoRun={disableLoadingAnimations}
            />
          </>
        )}
@@ -64,6 +69,7 @@ const LoadingNovel: React.FC<Props> = ({
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={40}
          width={40}
+          stopAutoRun={disableLoadingAnimations}
        />

        <ShimmerPlaceHolder
@@ -71,12 +77,14 @@ const LoadingNovel: React.FC<Props> = ({
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={18}
          width={textWidth}
+          stopAutoRun={disableLoadingAnimations}
        />
        <ShimmerPlaceHolder
          style={styles.picture}
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={20}
          width={chapterNumberWidth}
+          stopAutoRun={disableLoadingAnimations}
        />
      </View>
    );
@@ -5,12 +5,14 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { ThemeColors } from '@theme/types';

 import getLoadingColors from '@utils/getLoadingColors';
+import { useAppSettings } from '@hooks/persisted/index';

 interface Props {
  theme: ThemeColors;
 }

 const MalLoading: React.FC<Props> = ({ theme }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
  const styles = createStyleSheet(theme);

@@ -25,6 +27,7 @@ const MalLoading: React.FC<Props> = ({ theme }) => {
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={120 + Math.random() * 28}
          width={100}
+          stopAutoRun={disableLoadingAnimations}
        />
        <View style={styles.loadingText}>
          <ShimmerPlaceHolder
@@ -32,18 +35,21 @@ const MalLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={Dimensions.get('window').width - 140}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={Dimensions.get('window').width - 140}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={randomNumber * (Dimensions.get('window').width - 140)}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
      </View>
@@ -5,12 +5,14 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { ThemeColors } from '@theme/types';

 import getLoadingColors from '@utils/getLoadingColors';
+import { useAppSettings } from '@hooks/persisted/index';

 interface Props {
  theme: ThemeColors;
 }

 const MalLoading: React.FC<Props> = ({ theme }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
  const styles = createStyleSheet(theme);

@@ -25,6 +27,7 @@ const MalLoading: React.FC<Props> = ({ theme }) => {
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={120 + Math.random() * 28}
          width={100}
+          stopAutoRun={disableLoadingAnimations}
        />
        <View style={styles.loadingText}>
          <ShimmerPlaceHolder
@@ -32,18 +35,21 @@ const MalLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={Dimensions.get('window').width - 140}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={Dimensions.get('window').width - 140}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={randomNumber * (Dimensions.get('window').width - 140)}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
      </View>
@@ -2,18 +2,30 @@ import { FlatList, StyleSheet } from 'react-native';
 import React from 'react';
 import { Appbar, List, SwitchItem } from '@components';

-import { useBrowseSettings, usePlugins, useTheme } from '@hooks/persisted';
+import {
+  useBrowseSettings,
+  usePlugins,
+  useTheme,
+} from '@hooks/persisted/index';
 import { getString } from '@strings/translations';
 import { languages } from '@utils/constants/languages';
-import { BrowseSettingsScreenProp } from '@navigators/types';
+import { BrowseSettingsScreenProp } from '@navigators/types/index';
+import { useBoolean } from '@hooks';
+import ConcurrentSearchesModal from '@screens/browse/settings/modals/ConcurrentSearchesModal';

 const BrowseSettings = ({ navigation }: BrowseSettingsScreenProp) => {
  const theme = useTheme();
  const { goBack } = navigation;

  const { languagesFilter, toggleLanguageFilter } = usePlugins();
-  const { showMyAnimeList, showAniList, setBrowseSettings } =
-    useBrowseSettings();
+  const {
+    showMyAnimeList,
+    showAniList,
+    globalSearchConcurrency,
+    setBrowseSettings,
+  } = useBrowseSettings();
+
+  const globalSearchConcurrencyModal = useBoolean();

  return (
    <>
@@ -22,6 +34,12 @@ const BrowseSettings = ({ navigation }: BrowseSettingsScreenProp) => {
        handleGoBack={goBack}
        theme={theme}
      />
+      <ConcurrentSearchesModal
+        globalSearchConcurrency={globalSearchConcurrency ?? 1}
+        modalVisible={globalSearchConcurrencyModal.value}
+        hideModal={globalSearchConcurrencyModal.setFalse}
+        theme={theme}
+      />
      <FlatList
        contentContainerStyle={styles.container}
        ListHeaderComponent={
@@ -29,9 +47,10 @@ const BrowseSettings = ({ navigation }: BrowseSettingsScreenProp) => {
            <List.SubHeader theme={theme}>
              {getString('browseScreen.globalSearch')}
            </List.SubHeader>
-            <List.InfoItem
-              title={getString('browseSettingsScreen.searchAllWarning')}
-              icon="information-outline"
+            <List.Item
+              title={getString('browseSettingsScreen.concurrentSearches')}
+              description={(globalSearchConcurrency ?? 1).toString()}
+              onPress={globalSearchConcurrencyModal.setTrue}
              theme={theme}
            />
            <List.Divider theme={theme} />
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+
+import { Portal, Modal, overlay } from 'react-native-paper';
+
+import { RadioButton } from '@components/RadioButton/RadioButton';
+import { ThemeColors } from '@theme/types';
+import { getString } from '@strings/translations';
+import { useBrowseSettings } from '@hooks/persisted/index';
+
+interface DisplayModeModalProps {
+  globalSearchConcurrency: number;
+  modalVisible: boolean;
+  hideModal: () => void;
+  theme: ThemeColors;
+}
+
+const ConcurrentSearchesModal: React.FC<DisplayModeModalProps> = ({
+  theme,
+  globalSearchConcurrency,
+  hideModal,
+  modalVisible,
+}) => {
+  const { setBrowseSettings } = useBrowseSettings();
+
+  return (
+    <Portal>
+      <Modal
+        visible={modalVisible}
+        onDismiss={hideModal}
+        contentContainerStyle={[
+          styles.containerStyle,
+          { backgroundColor: overlay(2, theme.surface) },
+        ]}
+      >
+        <Text style={[styles.modalHeader, { color: theme.onSurface }]}>
+          {getString('browseSettingsScreen.concurrentSearches')}
+        </Text>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(concurrency => (
+          <RadioButton
+            key={concurrency}
+            status={globalSearchConcurrency === concurrency}
+            onPress={() =>
+              setBrowseSettings({ globalSearchConcurrency: concurrency })
+            }
+            label={concurrency.toString()}
+            theme={theme}
+          />
+        ))}
+      </Modal>
+    </Portal>
+  );
+};
+
+export default ConcurrentSearchesModal;
+
+const styles = StyleSheet.create({
+  containerStyle: {
+    paddingVertical: 20,
+    margin: 20,
+    borderRadius: 28,
+  },
+  modalHeader: {
+    paddingHorizontal: 24,
+    fontSize: 24,
+    marginBottom: 10,
+  },
+});
@@ -4,12 +4,14 @@ 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 {
  theme: ThemeColors;
 }

 const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);

  const [highlightColor, backgroundColor] = getLoadingColors(theme);
@@ -23,6 +25,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={19.3}
            width={Math.random() * 40 + 50}
+            stopAutoRun={disableLoadingAnimations}
          />
        ) : null}
        <View style={styles.chapterCtn} key={index}>
@@ -31,6 +34,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={80}
            width={56}
+            stopAutoRun={disableLoadingAnimations}
          />
          <View style={styles.textCtn}>
            <ShimmerPlaceHolder
@@ -38,12 +42,14 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
              height={16}
              width={208.7}
+              stopAutoRun={disableLoadingAnimations}
            />
            <ShimmerPlaceHolder
              style={styles.text}
              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
              height={12}
              width={208.7}
+              stopAutoRun={disableLoadingAnimations}
            />
          </View>
          <View style={styles.buttonCtn}>
@@ -52,6 +58,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
              height={24}
              width={24}
+              stopAutoRun={disableLoadingAnimations}
            />
          </View>
          <View style={styles.buttonCtn}>
@@ -60,6 +67,7 @@ const HistorySkeletonLoading: React.FC<Props> = ({ theme }) => {
              shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
              height={24}
              width={24}
+              stopAutoRun={disableLoadingAnimations}
            />
          </View>
        </View>
@@ -4,12 +4,14 @@ 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 {
  theme: ThemeColors;
 }

 const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
  const styles = createStyleSheet();

@@ -23,6 +25,7 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={150}
          width={100}
+          stopAutoRun={disableLoadingAnimations}
        />
        <View style={styles.novelTopText}>
          <ShimmerPlaceHolder
@@ -30,18 +33,21 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={25}
            width={240}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={20}
            width={240}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={20}
            width={240}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
      </View>
@@ -57,18 +63,21 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={56}
            width={90}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.icon}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={56}
            width={90}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.icon}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={56}
            width={90}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
        <View style={styles.novelInformationText}>
@@ -77,12 +86,14 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={350}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.text}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={350}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
        <View style={styles.novelInformationChips}>
@@ -91,12 +102,14 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={32}
            width={60}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.chip}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={32}
            width={60}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
      </View>
@@ -111,12 +124,14 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={20}
          width={350}
+          stopAutoRun={disableLoadingAnimations}
        />
        <ShimmerPlaceHolder
          style={styles.text}
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={16}
          width={350}
+          stopAutoRun={disableLoadingAnimations}
        />
      </View>
    );
@@ -131,6 +146,7 @@ const NovelScreenLoading: React.FC<Props> = ({ theme }) => {
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={30}
          width={350}
+          stopAutoRun={disableLoadingAnimations}
        />
        {items.map(renderLoadingChapter)}
      </View>
@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { View, Dimensions, StyleSheet } from 'react-native';
 import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
 import { LinearGradient } from 'expo-linear-gradient';
+import { useAppSettings } from '@hooks/persisted/index';

 const SkeletonLines = ({
  width,
@@ -22,6 +23,7 @@ const SkeletonLines = ({
  color?: string;
  highlightColor?: string;
 }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
  const styles = createStyleSheet(
    containerWidth,
@@ -77,6 +79,7 @@ const SkeletonLines = ({
              : randomNumber * skeletonWidth
          }
          height={skeletonHeight}
+          stopAutoRun={disableLoadingAnimations}
        />
      );
    }
@@ -89,6 +92,7 @@ const SkeletonLines = ({
          shimmerColors={[color, highlightColor, color]}
          width={skeletonWidth}
          height={skeletonHeight}
+          stopAutoRun={disableLoadingAnimations}
        />
      );
    } else {
@@ -50,6 +50,7 @@ const GenralSettings: React.FC<GenralSettingsProps> = ({ navigation }) => {
    ['lastUpdatedAt', 'libraryScreen.bottomSheet.sortOrders.lastUpdated'],
  ]);
  const {
+    disableLoadingAnimations,
    updateLibraryOnLaunch,
    downloadNewChapters,
    onlyUpdateOngoingNovels,
@@ -235,6 +236,19 @@ const GenralSettings: React.FC<GenralSettingsProps> = ({ navigation }) => {
            }
            theme={theme}
          />
+          <SettingSwitch
+            label={getString('generalSettingsScreen.disableLoadingAnimations')}
+            description={getString(
+              'generalSettingsScreen.disableLoadingAnimationsDesc',
+            )}
+            value={disableLoadingAnimations}
+            onPress={() =>
+              setAppSettings({
+                disableLoadingAnimations: !disableLoadingAnimations,
+              })
+            }
+            theme={theme}
+          />
        </List.Section>
      </ScrollView>
      <DisplayModeModal
@@ -4,12 +4,14 @@ 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 {
  theme: ThemeColors;
 }

 const UpdatesSkeletonLoading: React.FC<Props> = ({ theme }) => {
+  const { disableLoadingAnimations } = useAppSettings();
  const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);

  const [highlightColor, backgroundColor] = getLoadingColors(theme);
@@ -22,6 +24,7 @@ const UpdatesSkeletonLoading: React.FC<Props> = ({ theme }) => {
          shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
          height={42}
          width={42}
+          stopAutoRun={disableLoadingAnimations}
        />
        <View>
          <ShimmerPlaceHolder
@@ -29,12 +32,14 @@ const UpdatesSkeletonLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={16}
            width={257.5}
+            stopAutoRun={disableLoadingAnimations}
          />
          <ShimmerPlaceHolder
            style={styles.textBottom}
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={12}
            width={257.5}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
        <View style={styles.buttonCtn}>
@@ -43,6 +48,7 @@ const UpdatesSkeletonLoading: React.FC<Props> = ({ theme }) => {
            shimmerColors={[backgroundColor, highlightColor, backgroundColor]}
            height={25}
            width={25}
+            stopAutoRun={disableLoadingAnimations}
          />
        </View>
      </View>
@@ -147,6 +147,7 @@
  },
  "browseSettings": "Browse Settings",
  "browseSettingsScreen": {
+    "concurrentSearches": "Concurrent Source Searches",
    "languages": "Languages",
    "onlyShowPinnedSources": "Only show pinned sources",
    "searchAllSources": "Search all sources",
@@ -258,6 +259,8 @@
    "bySource": "By source",
    "chapterSort": "Default chapter sort",
    "desc": "(Descending)",
+    "disableLoadingAnimations": "Disable loading animations",
+    "disableLoadingAnimationsDesc": "May improve performance on slower devices",
    "disableHapticFeedback": "Disable haptic feedback",
    "disableHapticFeedbackDescription": "Turn off vibrations for touch interactions.",
    "displayMode": "Display Mode",
@@ -126,6 +126,7 @@ export interface StringMap {
  'browseScreen.updateFailed': 'string';
  'browseScreen.updatedTo': 'string';
  'browseSettings': 'string';
+  'browseSettingsScreen.concurrentSearches': 'string';
  'browseSettingsScreen.languages': 'string';
  'browseSettingsScreen.onlyShowPinnedSources': 'string';
  'browseSettingsScreen.searchAllSources': 'string';
@@ -238,6 +239,8 @@ export interface StringMap {
  'generalSettingsScreen.refreshMetadata': 'string';
  'generalSettingsScreen.refreshMetadataDescription': 'string';
  'generalSettingsScreen.sortOrder': 'string';
+  'generalSettingsScreen.disableLoadingAnimations': 'string';
+  'generalSettingsScreen.disableLoadingAnimationsDesc': 'string';
  'generalSettingsScreen.updateLibrary': 'string';
  'generalSettingsScreen.updateLibraryDesc': 'string';
  'generalSettingsScreen.updateOngoing': 'string';