Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small changes following faster global search pr #1320

Merged
merged 2 commits into from
Nov 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/hooks/persisted/useSettings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ const initialAppSettings: AppSettings = {
const initialBrowseSettings: BrowseSettings = {
showMyAnimeList: true,
showAniList: true,
globalSearchConcurrency: 1,
globalSearchConcurrency: 3,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

most phones should be able to handle 3 and the first few concurrency increases makes a massive difference in loading time so may as well increase default

};

export const initialChapterGeneralSettings: ChapterGeneralSettings = {
Expand Down
4 changes: 2 additions & 2 deletions src/screens/Categories/components/CategorySkeletonLoading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions src/screens/browse/loadingAnimation/MalLoading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions src/screens/browse/loadingAnimation/TrackerLoading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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();
Expand Down
3 changes: 1 addition & 2 deletions src/screens/history/HistoryScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/screens/history/components/HistorySkeletonLoading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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}`}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 (
Expand Down Expand Up @@ -68,7 +68,7 @@ const NovelInformation = memo(() => (
</View>
));

const ChapterItem = memo(({ index }: { index: number }) => (
const ChapterItem = memo(() => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lint was mad at unused variable so i removed it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe lint gives problems because Traitor latest commit bypassed lint verification.

<View style={styles.chapter}>
<LoadingShimmer style={styles.text} height={20} width={350} />
<LoadingShimmer style={styles.text} height={16} width={350} />
Expand All @@ -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 />
Expand Down
4 changes: 2 additions & 2 deletions src/screens/updates/components/UpdatesSkeletonLoading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 (
Expand Down
21 changes: 0 additions & 21 deletions src/utils/getLoadingColors.ts

This file was deleted.

34 changes: 34 additions & 0 deletions src/utils/useLoadingColors.ts
Original file line number Diff line number Diff line change
@@ -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) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renamed to use cus of the useAppSettings inside

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;
Loading