I have simplified this code down to a minimum example that reproduces this. There are a few things in this code that are a bit contrived. Here's why:

1. loaded is set to true after a delay. In my actual project the image actually loads from network showing a progress indicator prior.

2. ContentView has two branches that are roughly the same. In my code they are quite different but turns out that does not seem to matter.

3. var expansionAnimationNamespace: Namespace.ID? = nil is stored in the ViewModel. In my project in one case the TheImage is displayed in plain SwiftUI. In another case TheImage is actually set in the UIHostingConfiguration. I originally thought this was why this animation was not working but it turns out you can repro this without it.

   @MainActor @Observable final class ViewModel { var bigger: Bool? = nil var expansionAnimationNamespace: Namespace.ID? = nil

   } struct TheImage: View { let id = "HI" let viewModel: ViewModel

   @State var loaded: Bool = false
   var body: some View {
       Group {
           if loaded {
               Image(systemName: "person")
                   .resizable()
                   .aspectRatio(contentMode: .fit)
                   .matchedGeometryEffect(id: id, in: viewModel.expansionAnimationNamespace ?? Namespace().wrappedValue)
           } else {
               ProgressView()
           }
       }.task {
           try? await Task.sleep(nanoseconds: 200)
           self.loaded = true
       }
   }
   

   } struct ContentView: View { @State var viewModel = ViewModel() @Namespace var namespace

   var body: some View {
       NavigationStack {
           if viewModel.bigger == true {
               TheImage(viewModel: viewModel)
                   .toolbar {
                       Button {
                           viewModel.bigger = nil
                       } label: {
                           Text("Smaller")
                       }
                   }
           } else {
               TheImage(viewModel: viewModel)
                   .frame(width: 100, height: 100)
                   .toolbar {
                       Button {
                           viewModel.bigger = true
                       } label: {
                           Text("Larger")
                       }
                   }
           }
       }.task {
           viewModel.expansionAnimationNamespace = namespace
       }
       .animation(.easeInOut, value: viewModel.bigger)
   }
   

   }

With this code there is not a smooth transition as this image grows and shrinks.

If you get rid of the loading state this view does grow and shrink smoothly.

If you move the matchedGeometryEffect out to the group the animation does very strange things with scale but does animate smoothly.