[iOS] 스켈레톤 뷰를 입혀보자!

서버에서 이미지를 가져오는 속도가 제각각이라서 어떠한 부분은 사진을 받아오고 나머지는 받아오지 못하는 현상이 있었습니다. 그러한 부분을 시각적으로 로딩이 되고있다는 프로그레스 뷰를 스켈레톤뷰를 입혀서 다른 앱 처럼 이쁘게 로딩이 되게끔하고 싶었습니다.

전체코드

struct FavoriteListView: View {
    
    @EnvironmentObject var homeStore: HomeStore
    @State var isLoading: Bool = true
    var body: some View {
        TabView {
            ForEach(homeStore.hotPlace) { place in
                NavigationLink {
                    GongGanDetailView(placeId: place.id)
                } label: {
                    ZStack {
                        AsyncImage(url: URL(string: "\(place.placeImageString)") ) { image in
                            image
                                .renderingMode(.original)
                                .resizable()
                        } placeholder: {
                            ProgressView()
                        }
                        .cornerRadius(8)
                        VStack {
                            Spacer()
                            Rectangle()
                                .frame( height: 92)
                                .foregroundColor(.black)
                            .opacity(0.5)
                            .overlay(alignment: .topLeading) {
                                VStack(alignment: .leading) {
                                    
                                    Text("\(place.placeName)")
                                        .font(.head1Bold)
                                        .padding(.bottom, 0.5)
                                    Text("\(place.address.address)")
                                        .font(.body1Regular)
                                }
                                .foregroundColor(.white)
                                .padding()
                            }
                        }
                        .cornerRadius(8, corners: .bottomLeft)
                        .cornerRadius(8, corners: .bottomRight)
                    }// ZSTACK
                    .onAppear {
                        Task {
                            await homeStore.fetchPlaces()
                            self.isLoading = false
                        }
                    }
                    .redacted(reason: isLoading ? .placeholder :
                                [])
                }
            }.padding(.horizontal, 5)
        }// TABVIEW
        .tabViewStyle(PageTabViewStyle())
        .frame( height: HomeNameSpace.screenWidth * 0.5)
    }
}

이 부분에서 봐야하는곳은
.redacted(reason: isLoading ? .placeholder :
[]) 이부분입니다.

• 이 뷰는 사용자에게 장소를 추천해주는 뷰의 코드입니다.

.onAppear {
                        Task {
                            await homeStore.fetchPlaces()
                            self.isLoading = false
                        }
                    }
                    .redacted(reason: isLoading ? .placeholder :
                                [])

• 이 코드는 뷰가 화면에 나타날 때, 비동기 작업을 시작하는 Task 내에서 작업이 완료되면 isLoading을 false로 설정하여, 삼항 연산자를 사용하여 redacted 메서드에 전달되는 reason이 []로 되어 로딩 중 상태를 해제합니다. 따라서 Task가 완료되지 않으면 계속해서 redacted가 true로 유지되어 로딩 중 상태가 유지될 것입니다.

.redacted의 대한 설명

Redacted 란

• redact: (민감한 정보를) 수정하다

어떤 정보를 수정할 때, 관련 이유를 redacted(reason:) 파라미터로 넣으면 그에 따른 UI를 보여주는 메소드
(스켈레톤 뷰처럼 뷰의 내용을 가려서 보여주는 것)

출처
https://ios-development.tistory.com/1168