Suspense, useSuspenseQuery를 이용해서 skeleton ui를 구현하는데 초기 렌더링시 화면이 덜그럭거리는 문제가 있습니다.

1번 질문에 대해서 생각해 본 부분을 남겨볼게요. 초기 렌더링 시 데이터가 없어서 영역 높이가 0이라 화면이 깜빡인다고 말씀하시는 걸까요? 그렇다면 렌더링할 컴포넌트에 최소한의 height를 지정해 놓으면 덜 깜빡거리게 느껴지지 않을까요? 그러나 여전히 깜빡임은 있을 것 같습니다. 캐시 데이터가 없는데 아직 isLoading이 true가 되지 않아 fallback으로 넘긴 skeleton ui가 맨 처음에 보이지 않는 문제라면 query data가 없는 경우에도 skeleton ui를 보여주도록 예외처리를 추가해 볼 수 있을 것 같습니다. 2번 질문에 대해서는 이미 캐시 데이터가 있는 경우에는 스켈레톤 ui를 보여주기 보단 keepPreviousdata 속성을 이용해서 이전 데이터를 보여주다가 새 데이터 응답이 완료되면 레이아웃 변경 없이 변경된 데이터만 보여주는 게 더 좋은 사용성이 아닐까 싶은 생각이 들었습니다. 질문자님이 하신 고민의 시간과 노력에 비해 떠오르는 생각으로 답변을 달다 보니 원하시는 답이 아닐 수 있을 것 같아요~ 참고만 해주시면 좋을 것 같습니다 :) 파이팅!!

previousData는 새로 페칭된 데이터로 갈음되기 전까지 유효합니다. 시간 의존성이 응답 시간에 달려있습니다. DeferredComponent의 시간 의존성은 컴포넌트 내부에 정의해 둔 delay에 달려있습니다. 둘 사이에는 관계성이 없습니다. A가 끝나고 B가 시작되고 B가 끝나고 C가 시작되는 식의 waterfall은 전후 종속성이 있거나 같은 의존성을 가져야 제어할 수 있습니다. 1,2 모두 이 의존성을 관리하는 문제로 보이네요.

같은 고민으로 덜컥거리는 것을 방지하기 위해 FadeIn이라는 컴포넌트를 Suspensive에서 제공하고 있는데 이걸 사용해보시면 어때요? https://github.com/toss/suspensive/blob/9127cecfb48e17ef7c53dabf29c991d86fb176df/examples/visualization/src/app/react-dom/FadeIn/page.tsx#L42 그럼 결과물은 이렇게 나오게 되어요 https://visualization.suspensive.org/react-dom/FadeIn