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,
+ },
});