open-lab/lnreader
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* Small changes following faster global search pr

* Fix lint error
This commit is contained in:
Adam Kemish
2024-11-25 23:17:18 +08:00
committed by GitHub
parent 8f783fd4c2
commit cdc4ddcc97
12 changed files with 55 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/persisted/useSettings.ts
+1 -1
View File
@@ -163,7 +163,7 @@ const initialAppSettings: AppSettings = {
const initialBrowseSettings: BrowseSettings = {
showMyAnimeList: true,
showAniList: true,
globalSearchConcurrency: 1,
globalSearchConcurrency: 3,
};
export const initialChapterGeneralSettings: ChapterGeneralSettings = {
src/screens/Categories/components/CategorySkeletonLoading.tsx
+2 -2
View File
@@ -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 (
src/screens/browse/loadingAnimation/GlobalSearchSkeletonLoading.tsx
+2 -2
View File
@@ -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 (
src/screens/browse/loadingAnimation/MalLoading.tsx
+2 -2
View File
@@ -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();
src/screens/browse/loadingAnimation/SourceScreenSkeletonLoading.tsx
+2 -2
View File
@@ -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();
src/screens/browse/loadingAnimation/TrackerLoading.tsx
+2 -2
View File
@@ -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();
src/screens/history/HistoryScreen.tsx
+1 -2
View File
@@ -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,
src/screens/history/components/HistorySkeletonLoading.tsx
+2 -2
View File
@@ -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}`}>
src/screens/novel/components/LoadingAnimation/NovelScreenLoading.tsx
+5 -5
View File
@@ -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 />
src/screens/updates/components/UpdatesSkeletonLoading.tsx
+2 -2
View File
@@ -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 (
src/utils/getLoadingColors.ts
-21
View File
@@ -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;
src/utils/useLoadingColors.ts
+34
View File
@@ -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;