ScrollView 리프레쉬 했을 때 화면이 멈추는 현상 해결하기

🤨 문제 정의

캐플 프로젝트 진행 중 다른 ScrollView는 문제가 없었지만 게시판 화면의 ScrollView에서 리프레쉬를 하니 로딩이 멈춰버리는 현상이 발생해 버렸습니다,,! 딱히 로직이 다른 것도 없고 로딩 화면도 같은 컴포넌트를 사용하고 있는데 어떤 부분이 문제일까요,,

 

🪓 삽질 기록

1. GeometryReader 문제?

GeometryReader를 사용해 View를 그릴 때 렌더링 문제를 마주했었던 경험이 있었기 때문에 이 부분을 제거해봤지만 결과는 똑같았습니다.(GeometryReader도 언젠가 제대로 이해하는 날이 오기를!)

GeometryReader { proxy in // 평소에 얘가 문제가 많던데,,?
    ZStack {
        BulletinBoardContentView(store: store)
        
        NewBoardPostButton(store: store)
        .position(
            CGPoint(
                x: proxy.size.width / 2,
                y: proxy.size.height - 40
            )
        )
    }
    .background(Background.first)
}

 

😈 문제 해결

아무리 봐도 비슷해보여 이것저것 실험하던 중 눈에 띄던 코드,,

ScrollView {
    ...
}
.disabled(store.isLoading)

ScrollView가 리프레쉬 중일 때 셀이 연속으로 터치되지 않도록 추가했었던 disabled 코드가 문제였습니다. 문제를 되짚어보자면,

 

1. ScrollView 리프레쉬 시작

2. Store의 isLoading 값 토글

3. ScrollView 비활성화

4. 애니메이션 멈춤(disabled)

 

loading 컴포넌트는 기본적으로 화면 터치를 막기 위해 얕은 백그라운드 컬러를 적용하고 있었기 때문에 해당 코드를 삭제하는 것으로 문제를 해결했습니다! 😇

struct LoadingIndicatorModifier: ViewModifier {
    
    let isLoading: Bool
    
    func body(content: Content) -> some View {
        content
            .overlay {
                if isLoading {
                    ZStack {
                        // 미세하게 백그라운드를 줘서 터치 못하게 막기
                        Color.black.opacity(0.0001).ignoresSafeArea()
                        ProgressView()
                            .scaleEffect(1.5)
                            .progressViewStyle(.circular)
                            .tint(.primary)
                    }
                }
            }
    }
}