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

El issue proporciona ejemplos del ciclo de vida usando componentWillReceiveProps, componentDidUpdate, shouldComponentUpdate y fetchRoutes, pero no nombra ningún archivo del repositorio, prueba ni punto de entrada. Primero hay que determinar si se trata de un cambio de documentación para el sitio web de React o de una cuestión de uso específica de una aplicación; para darlo por terminado, debe haber un comportamiento claramente delimitado y reproducible, así como un objetivo acordado de documentación o código.