diff --git a/app/assets/movix512.png b/app/assets/movix512.png new file mode 100644 index 0000000..1e5feb1 Binary files /dev/null and b/app/assets/movix512.png differ diff --git a/app/src/screens/BrowserScreen.tsx b/app/src/screens/BrowserScreen.tsx index 998279c..1290ff2 100644 --- a/app/src/screens/BrowserScreen.tsx +++ b/app/src/screens/BrowserScreen.tsx @@ -7,7 +7,8 @@ import { Platform, Modal, TouchableOpacity, - ActivityIndicator, + Image, + Animated, } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import type { WebViewNavigation } from 'react-native-webview'; @@ -44,6 +45,8 @@ export default function BrowserScreen() { const [currentUrl, setCurrentUrl] = useState(''); const [dnsEnabled, setDnsEnabled] = useState(false); const [settingsVisible, setSettingsVisible] = useState(false); + const [webViewReady, setWebViewReady] = useState(false); + const splashFade = useRef(new Animated.Value(1)).current; const activeUrl = urlChain[mirrorIndex] ?? ''; @@ -95,6 +98,15 @@ export default function BrowserScreen() { [activeUrl, mirrorIndex, urlChain.length], ); + const onWebViewLoadEnd = useCallback(() => { + if (webViewReady) return; + Animated.timing(splashFade, { + toValue: 0, + duration: 400, + useNativeDriver: true, + }).start(() => setWebViewReady(true)); + }, [webViewReady, splashFade]); + const closeSettings = useCallback(() => { setSettingsVisible(false); AsyncStorage.getItem('dns_enabled').then(val => { @@ -105,36 +117,34 @@ export default function BrowserScreen() { const onRetry = useCallback(async () => { setAllMirrorsFailed(false); setMirrorIndex(0); + setWebViewReady(false); + splashFade.setValue(1); await refresh(); - }, [refresh]); + }, [refresh, splashFade]); - if (isLoading || !config) { - return ( - - - - ); - } - - if (allMirrorsFailed) { - return ( - - ); - } + const showWebView = !isLoading && !!config && !allMirrorsFailed; + const showSplash = (!webViewReady || isLoading || !config) && !allMirrorsFailed; return ( - - - + {showWebView && ( + + + + )} - {!toolbarHidden && ( + {allMirrorsFailed && config && ( + + )} + + {!toolbarHidden && showWebView && ( )} - - - - - Fermer - - Paramètres - + {showWebView && ( + + + + + Fermer + + Paramètres + + + - - - + + )} - {navBarHidden && setSettingsVisible(true)} />} + {navBarHidden && showWebView && ( + setSettingsVisible(true)} /> + )} + + {showSplash && ( + + + + )} ); } @@ -179,10 +205,6 @@ const styles = StyleSheet.create({ flex: 1, backgroundColor: '#0a0a0a', }, - centered: { - justifyContent: 'center', - alignItems: 'center', - }, webViewContainer: { flex: 1, }, @@ -213,4 +235,13 @@ const styles = StyleSheet.create({ fontSize: 15, fontWeight: '500', }, + splash: { + backgroundColor: '#B5302C', + justifyContent: 'center', + alignItems: 'center', + }, + splashLogo: { + width: 150, + height: 150, + }, });