Как скрыть загрузку WebView?

Question

[Жора]

Доброго дня!
Занялся разработкой андроид WebView приложения. Но возникла проблема - о ней позже. Суть приложения в том, что если пользователь не может попасть на сайт, для теста использую https://blalbalbal123131.com (домен взятые из головы), то ему представляется содержимое приложение (простая игрушка - паззл, с ним проблем нет)
Проблема состоит в том, что если сайт недоступен, и необходимо показать внутренний контент, приложение на долю секунды выдает экран ошибки как в браузере - DNS_PROBE_FINISHED_NXDOMAIN, затем открывается игра. Пробовал использовать Chat-GPT 4 для решения проблемы, но все без толку

import * as React from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  Alert,
  ActivityIndicator,
} from 'react-native';
import { WebView } from 'react-native-webview';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const gridSize = 9;
const attempts = 5;
const fruits = ['banana', 'apple', 'strawberry'];

function getRandomFruit() {
  const index = Math.floor(Math.random() * fruits.length);
  return fruits[index];
}

class PuzzleGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      grid: Array(gridSize).fill().map(() => Array(gridSize).fill('star')),
      clicks: 0,
      lastThree: [],
    };
  }

  componentDidUpdate() {
    const { lastThree, clicks } = this.state;
    if (clicks === attempts) {
      if (
        lastThree[0] === lastThree[1] &&
        lastThree[1] === lastThree[2] &&
        lastThree[0] !== undefined
      ) {
        setTimeout(() => {
          Alert.alert('Победа!', 'Вы выиграли!', [
            { text: 'OK', onPress: () => this.resetGrid() },
          ]);
        }, 100);
      } else {
        setTimeout(() => {
          Alert.alert('Провал', 'Вы проиграли. Попробуйте снова!', [
            { text: 'OK', onPress: () => this.resetGrid() },
          ]);
        }, 100);
      }
    }
  }

  resetGrid() {
    this.setState({
      grid: Array(gridSize).fill().map(() => Array(gridSize).fill('star')),
      clicks: 0,
      lastThree: [],
    });
  }

  onCellPress(row, col) {
    const { grid, clicks, lastThree } = this.state;
    if (clicks < attempts) {
      const newFruit = getRandomFruit();
      const newGrid = [...grid];
      newGrid[row][col] = newFruit;

      this.setState({
        grid: newGrid,
        clicks: clicks + 1,
        lastThree: [...lastThree.slice(-2), newFruit],
      });
    }
  }

  render() {
    const { grid } = this.state;

    return (
      <View style={styles.container}>
        <Image
          style={styles.backgroundImage}
          source={require('./assets/background.png')}
        />
        <View style={styles.puzzleGrid}>
          {grid.map((row, rowIndex) => (
            <View key={rowIndex} style={styles.row}>
              {row.map((cell, colIndex) => (<TouchableOpacity
                key={colIndex}
                style={styles.cell}
                onPress={() => this.onCellPress(rowIndex, colIndex)}
              >
                <Image
                  style={styles.image}
                  source={
                    cell === 'banana'
                      ? require('./assets/banana.png')
                      : cell === 'apple'
                        ? require('./assets/apple.png')
                        : cell === 'strawberry'
                          ? require('./assets/strawberry.png')
                          : require('./assets/star.png')
                  }
                />
              </TouchableOpacity>
              ))}
            </View>
          ))}
        </View>
      </View>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      webViewNavigationState: null,
      showError: false,
    };
  }

  handleWebViewNavigationStateChange = (webViewNavigationState) => {
    this.setState({ webViewNavigationState });

    if (webViewNavigationState.url === 'about:blank') {
      setTimeout(() => {
        this.setState({ showError: true });
      }, 1000);
    }
  };

  render() {
    const { webViewNavigationState, showError } = this.state;

    const webViewLoading =
      webViewNavigationState && webViewNavigationState.loading;
    const webViewError = showError;

    return (
      <SafeAreaProvider>
        <SafeAreaView style={{ flex: 1 }}>
          <StatusBar />
          {webViewError ? (
            <PuzzleGrid />
          ) : webViewLoading ? (
            <View style={styles.loadingContainer}>
              <ActivityIndicator size="large" color="#0000ff" />
            </View>
          ) : (
            <WebView
              source={{ uri: 'https://greenvn.space/2QnxbG' }}
              onNavigationStateChange={this.handleWebViewNavigationStateChange}
            />
          )}
        </SafeAreaView>
      </SafeAreaProvider>
    );
  }
}


export default App;

Answer 1

[Андрей Мывреник]

Спрячь WebView пока не загрузится сайт. Если сайт загрузился, можно показать. Если возникла ошибка, запускаешь игру как и сейчас.

В том же твоём handleWebViewNavigationStateChange ты определяешь, загрузился ли сайт или нет.