How to use transition() on view together with onAppear() or task() in SwiftUI?

Assume that I have a MainView with a button and when I tap on it I want to present some data on another view - DataView. There are two requirements:

1. There should be an animation for transitioning DataView on the screen
2. Data for DataView needs to be loaded sometime after creation of the view

As a consequence of the second requirement I created a state variable indicating if loading is finished. When it is not yet finished appropriate informational label is presented (i.e. "loading data"). If loading is done, the loaded data is presented.

Now I need to initiate loading process somewhere so I do it via the onAppear() method of the DataView in case of synchronous loading or via task() method in case of async loading.

Then I add code for animating to fulfill requirement number one and the app does not behave as I want it to: while there is a loading label everything goes as planned, but after I change it for the data, the data does not continue to be animated but pops out at its destination right away.

I get it that when the subviews switch during animation it may be hard for SwiftUI to track everything and accomplish what I expect it to happen. And I don't mind to start loading the data after the animation is finished. Maybe I would even prefer it that way, but it is my understanding that there is no easy way to tell that the animation is finished. And at the same time I have a feeling that what I want to accomplish, i.e. start data loading after view appears is a basic scenario for nearly every app. So where I did go wrong with my implementation?

import SwiftUI
import PlaygroundSupport

struct MainView: View {
    @State var show = false
    
    var body: some View {
        VStack {
            if show {
                DataView()
                    .transition(.move(edge: .leading))
            }
            
            Spacer()
            
            Button("Show data") {
                withAnimation(.linear(duration: 4)) {
                    show.toggle()
                }
            }
        }
    }
}


struct DataView: View {
    @State var loaded = false
    
    var body: some View {
        VStack {
            Text("Data view")
            
            if loaded {
                Text("The data")
            } else {
                LoaderView()
            }
        }
        .task {
            try? await Task.sleep(nanoseconds: UInt64(2 * Double(NSEC_PER_SEC)))
            loaded = true
        }
//        it does not work with onAppear also
//        .onAppear {
//            loaded = true
//        }
    }
}

struct LoaderView: View {
    var body: some View {
        Text("Loading data")
    }
}
 
PlaygroundPage
    .current.setLiveView(
        MainView()
            .frame(width: 300, height: 200, alignment: .center))

EDIT: I updated code by adding LoaderView to counter vacawama's answer

Due to the if-else structure, SwiftUI sees the two Text views as different views which is why the animation stops as soon as loaded changes to true. If you replace the if statement with a ternary operator ? : to replace the input data to the Text view, then SwiftUI will see the Text view as the same view and the animation will continue after loading is set to true.

replace:

if loaded {
    Text("The data")
} else {
    Text("Loading data")
}

with:

Text(loaded ? "The data" : "Loading data")

After your Edit, the same issue applies. Swapping out a view that is animating will lose the animation. You need to find a way to unite the "Loading data" message and the actual display of the information. Here is a way you could do it by passing the data to the LoadingView:

struct DataView: View {
    @State private var loaded = false
    @State private var data = ""

    var body: some View {
        VStack {
            Text("Data view")
            LoaderView(loaded: loaded, data: data)
        }
        .task {
            try? await Task.sleep(nanoseconds: UInt64(2 * Double(NSEC_PER_SEC)))
            data = "The data"
            loaded = true

        }
    }
}

struct LoaderView: View {
    let loaded: Bool
    let data: String
    var body: some View {
        Text(loaded ? data: "Loading data")
    }
}

Alternate Solution

Another way to approach this is to have "Loading data" and your data displayed at all times, but make one of them invisible depending on the state of loaded:

struct DataView: View {
    @State var loaded = false

    var body: some View {
        VStack {
            Text("Data view")

            ZStack {
                Text("The data").opacity(loaded ? 1 : 0)
                LoaderView().opacity(loaded ? 0 : 1)
            }
        }
        .task {
            try? await Task.sleep(nanoseconds: UInt64(2 * Double(NSEC_PER_SEC)))
            loaded = true
        }
    }
}