Как реализовать preloader?

Question

[Юрий Иванов]

Добрый день, многоуважаемые, очень нужен совет-подсказка.
Есть приложение на реакт, есть header и main
header статичный, main меняет контент. Дак вот, при запросе к апи показываю прелоадер. Но если в нетворк в девтулзах ставлю медленный интернет, то все выглядит не красиво. Прелоадер пропадает а картинка загрузилась на четверть например. Какие-то еще данные не до конца прогрузились.
Как можно скрыть весь компонент main, пока данные не полученные, с помощью чего это вообще стоит в реакте отслеживать?

Answer 1

[iddqda]

Возможно мой совет покажется глупым, так как по Реакту я пока даже еще учебник не дочитал
но в своем поделии делаю как то так:

class Main extends Component {
    state = {
        Data: [],
        isFetching: true,
    }
    openSpinner = () => {
        this.setState(() => ({ isFetching: true }));
    }

    hideSpinner = () => {
        this.setState(() => ({ isFetching: false }));
    }

    _loaddata = async (tab) => {
        this.openSpinner();

        const data = await fetchWrapper(URL);
        if (data)
            this.setState({ Data: data })

        this.hideSpinner();
    }

    async componentDidMount() {
        await this._loaddata();
    }

    render() {
        const { isFetching } = this.state;
        return (
            <>
                <Content />
                <Spiner show={isFetching} />
            </>
        )
    }  
}