[Feature] - 새로고침 loading spinner

[arch-spatula]

기능명

• 새로고침하면 메모리상 저장된 모든 데이터를 잃고 서버에 데이터를 재요청함
• 요청응답을 받을 때까지 화면이 모두 비어있음
  • loader에서 요청을 처리하기 때문에 발생

feat/refresh-loader

---

• todo

참고할 사항

• 알고 있어야 할 사항을 bullet point로 자세히 작성하기 바랍니다.

[arch-spatula]

새로고침 기능을 앱에서 방지하고 있습니다.

마이너한 기능에 메이저한 노력이 필요해보입니다.

Suspense 적용이 소용없었습니다.

Suspense는 App

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <Suspense fallback={<Spinner />}>
        <QueryClientProvider client={queryClient}>
          <App />
          <ReactQueryDevtools />
        </QueryClientProvider>
      </Suspense>
    </ThemeProvider>
  </React.StrictMode>
);

Router에도 적용했습니다.

{
        path: ROUTE_PATHS.CARDS,
        element: (
          <Suspense fallback={<Spinner />}>
            <Cards />
          </Suspense>
        ),
        loader: cardLoader(),
      },

function Router() {
  return (
    <Suspense fallback={<Spinner />}>
      <RouterProvider router={routes} />
    </Suspense>
  );
}

3가지 지점 모두 적용했습니다.