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

Das Issue enthält Beispiele für den Lebenszyklus mit componentWillReceiveProps, componentDidUpdate, shouldComponentUpdate und fetchRoutes, nennt jedoch keine Datei im Repository, keinen Test und keinen Einstiegspunkt. Zunächst muss festgestellt werden, ob es sich um eine Dokumentationsänderung für die React-Website oder um eine anwendungsspezifische Nutzungsfrage handelt; als erledigt gilt die Aufgabe, wenn ein klar abgegrenztes, reproduzierbares Verhalten sowie ein vereinbartes Dokumentations- oder Code-Ziel feststehen.