Save previous view when move data fetch from componentWillUpdate(WillReceiveProps) to ComponentDidUpdate

Hi. everyone. Trying to move my fetching for component frome Legasy to recommended lifecycle methods.
In this post we loading component when data is fetched, otherwise we show loader. I need to fetch all data to show component, and while fetching need show not only loader, but loader up on my current view(component). Before i did it in

   componentWillReceiveProps(nextProps){
        const current = `${this.props.location.pathname}${this.props.location.search}`
        const next = `${nextProps.location.pathname}${nextProps.location.search}`

        if (current === next && this.props.isAuth === nextProps.isAuth) {
            return
        }

       this.fetchRoutes(nextProps)
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !nextState.isAppFetching && (!isEqual(this.state, nextState) || !isEqual(this.props, nextProps)         
    }

    fetchRoutes(nextProps) {
        const {dispatch, location} = nextProps

        dispatch(showLoading())

        this.setState({
            isAppFetching : true
        }, () =>
            reactRouterFetch( routes, location, { dispatch }).then(
                () => this.setState({isAppFetching: false}, () => dispatch(hideLoading())),
                () => this.setState({isAppFetching: false}, () => dispatch(hideLoading()))
            )(this is ajax call)
        )
    }
    render () {
        const { appFetchingError} = this.props
        const landingPage = this.state.isAppFetching ? null : appFetchingError.status
            ? handlingApiError(appFetchingError, this.props)
            : render UI with all props from redux
        .....
    }

so if i change pathname i start fetching my data. Then it avoid render while fetching data in shouldComponentUpdate. So by this i show my previous route component and loading bar while fetching, then change my view to new UI according to new route.

By moving WillReceiveProps internal code to DidUpdate, first of all it change my view then show loadingBar up on It then fullfill new view by fetched props.

How can i avoid view changing untill all data wii be fetched from server (like GitHub links jumping)? is it possible to save previous rendered things with previousProps and previousState?

New code is

   `componentDidUpdate(prevProps){
        const current = `${this.props.location.pathname}${this.props.location.search}`
        const prev = `${prevProps.location.pathname}${prevProps.location.search}`

        if (current === prev && this.props.isAuth === prevProps.isAuth) {
            return
        }

        if(!prevProps.manual) this.fetchRoutes(this.props)
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (nextState.isDataFetched || nextState.needDataFetch) && (!isEqual(this.state, nextState) || !isEqual(this.props, nextProps) )
    }

    fetchRoutes(nextProps) {
        const {dispatch, location} = nextProps

        dispatch(showLoading())

        this.setState({
                isDataFetched : false,
                needDataFetch: true
            }, () =>
                reactRouterFetch( routes, location, { dispatch })
                    .then(() => dispatch(hideLoading()),
                        () => dispatch(hideLoading()))
                    .then(() => this.setState({isDataFetched: true,  needDataFetch: false}))
        )
    }
    render () {
        const { appFetchingError } = this.props
        const landingPage = !this.state.isDataFetched ? null : appFetchingError.status
            ? handlingApiError(appFetchingError, this.props)
            : render UI with all props.
      ......
    }

And my screen will show loadingBar on empty page while fetching according to null in render condition, instead previous view

L’issue fornisce esempi del ciclo di vita che usano componentWillReceiveProps, componentDidUpdate, shouldComponentUpdate e fetchRoutes, ma non indica alcun file del repository, test o punto di ingresso. Per prima cosa bisogna determinare se si tratta di una modifica alla documentazione del sito web React o di una domanda sull’utilizzo specifica di un’applicazione; il lavoro è completato quando sono definiti un comportamento chiaramente circoscritto e riproducibile e un obiettivo concordato per la documentazione o il codice.