From 77029294aaa181e463fcbbdd16248bb287d8e94b Mon Sep 17 00:00:00 2001 From: tapframe Date: Wed, 13 Aug 2025 03:06:42 +0530 Subject: [PATCH] added loading animations --- assets/Progress of loading hand.lottie | Bin 0 -> 3396 bytes ...{Dog Running.lottie => dog-running.lottie} | Bin metro.config.js | 2 +- package-lock.json | 21 +++++ package.json | 1 + src/components/common/DogLoadingSpinner.tsx | 86 ++++++++++++++++++ src/screens/HomeScreen.tsx | 10 +- src/screens/SearchScreen.tsx | 20 +++- 8 files changed, 133 insertions(+), 7 deletions(-) create mode 100644 assets/Progress of loading hand.lottie rename assets/{Dog Running.lottie => dog-running.lottie} (100%) create mode 100644 src/components/common/DogLoadingSpinner.tsx diff --git a/assets/Progress of loading hand.lottie b/assets/Progress of loading hand.lottie new file mode 100644 index 0000000000000000000000000000000000000000..64c9a2ae7a5eda6ddb2b337cec8010ee39c86268 GIT binary patch literal 3396 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 F{TE;iGw}cb literal 0 HcmV?d00001 diff --git a/assets/Dog Running.lottie b/assets/dog-running.lottie similarity index 100% rename from assets/Dog Running.lottie rename to assets/dog-running.lottie diff --git a/metro.config.js b/metro.config.js index dc78200..9ef0040 100644 --- a/metro.config.js +++ b/metro.config.js @@ -25,7 +25,7 @@ config.transformer = { // Optimize resolver for better tree shaking and SVG support config.resolver = { ...config.resolver, - assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'), + assetExts: [...config.resolver.assetExts.filter((ext) => ext !== 'svg'), 'lottie'], sourceExts: [...config.resolver.sourceExts, 'svg'], resolverMainFields: ['react-native', 'browser', 'main'], }; diff --git a/package-lock.json b/package-lock.json index 1e1eded..2cba9c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,6 +46,7 @@ "expo-system-ui": "^4.0.9", "expo-web-browser": "~14.0.2", "lodash": "^4.17.21", + "lottie-react-native": "^7.3.1", "react": "18.3.1", "react-native": "0.76.9", "react-native-gesture-handler": "~2.20.2", @@ -10434,6 +10435,26 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-react-native": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-7.3.1.tgz", + "integrity": "sha512-VW0gtiP1i3Jv6+PaVaNg6QDIqAXwAqmxVp1UOJFqsB6FeBN0zc8M/XR8DE8YiayZzd149nlqGOgmwoV7FbRGDw==", + "license": "Apache-2.0", + "peerDependencies": { + "@lottiefiles/dotlottie-react": "^0.6.5", + "react": "*", + "react-native": ">=0.46", + "react-native-windows": ">=0.63.x" + }, + "peerDependenciesMeta": { + "@lottiefiles/dotlottie-react": { + "optional": true + }, + "react-native-windows": { + "optional": true + } + } + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", diff --git a/package.json b/package.json index 8ab9089..b7e6eae 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "expo-system-ui": "^4.0.9", "expo-web-browser": "~14.0.2", "lodash": "^4.17.21", + "lottie-react-native": "^7.3.1", "react": "18.3.1", "react-native": "0.76.9", "react-native-gesture-handler": "~2.20.2", diff --git a/src/components/common/DogLoadingSpinner.tsx b/src/components/common/DogLoadingSpinner.tsx new file mode 100644 index 0000000..0bdf629 --- /dev/null +++ b/src/components/common/DogLoadingSpinner.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { View, Text, StyleSheet, Dimensions } from 'react-native'; +import LottieView from 'lottie-react-native'; +import { useTheme } from '../../contexts/ThemeContext'; + +interface DogLoadingSpinnerProps { + text?: string; + size?: 'small' | 'medium' | 'large'; + style?: any; + source?: any; // optional override for Lottie source + offsetY?: number; // optional vertical offset +} + +const DogLoadingSpinner: React.FC = ({ + text, + size = 'large', + style, + source, + offsetY = 0, +}) => { + const { currentTheme } = useTheme(); + + const getSizeStyles = () => { + switch (size) { + case 'small': + return { width: 60, height: 60 }; + case 'medium': + return { width: 100, height: 100 }; + case 'large': + default: + return { width: 150, height: 150 }; + } + }; + + const getTextSize = () => { + switch (size) { + case 'small': + return 12; + case 'medium': + return 14; + case 'large': + default: + return 16; + } + }; + + return ( + + + {text && ( + + {text} + + )} + + ); +}; + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + }, + animation: { + // Size will be set by getSizeStyles() + }, + text: { + marginTop: 16, + textAlign: 'center', + fontWeight: '500', + }, +}); + +export default DogLoadingSpinner; diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index ef5f768..edf15ae 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -48,6 +48,7 @@ import { useSettings, settingsEmitter } from '../hooks/useSettings'; import FeaturedContent from '../components/home/FeaturedContent'; import CatalogSection from '../components/home/CatalogSection'; import { SkeletonFeatured } from '../components/home/SkeletonLoaders'; +import DogLoadingSpinner from '../components/common/DogLoadingSpinner'; import homeStyles, { sharedStyles } from '../styles/homeStyles'; import { useTheme } from '../contexts/ThemeContext'; import type { Theme } from '../contexts/ThemeContext'; @@ -92,7 +93,7 @@ const SkeletonCatalog = React.memo(() => { return ( - + ); @@ -545,8 +546,7 @@ const HomeScreen = () => { translucent /> - - Loading your content... + ); @@ -633,7 +633,7 @@ const HomeScreen = () => { - + ({ flex: 1, justifyContent: 'center', alignItems: 'center', - paddingBottom: 90, + // Ensure perfect centering }, loadingText: { marginTop: 12, diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx index 4780d13..9c7edd1 100644 --- a/src/screens/SearchScreen.tsx +++ b/src/screens/SearchScreen.tsx @@ -40,9 +40,11 @@ import { logger } from '../utils/logger'; import { BlurView } from 'expo-blur'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useTheme } from '../contexts/ThemeContext'; +import DogLoadingSpinner from '../components/common/DogLoadingSpinner'; const { width, height } = Dimensions.get('window'); const isTablet = width >= 768; +const TAB_BAR_HEIGHT = 85; // Tablet-optimized poster sizes const HORIZONTAL_ITEM_WIDTH = isTablet ? width * 0.18 : width * 0.3; @@ -582,7 +584,13 @@ const SearchScreen = () => { {/* Content Container */} {searching ? ( - + + + ) : query.trim().length === 1 ? (