빠른 네트워크 사용자를 위한 로딩 화면 최적화 전략

[sgoldenbird]

빠른 네트워크 환경의 사용자에게 불필요한 로딩 화면을 보여주지 않기 위해, 로딩 UI를 일정 시간 후에만 표시하는 지연 렌더링 전략을 도입했습니다. 이를 통해 화면 깜빡임과 UX 불쾌감을 최소화했습니다.

---

목적

• 로딩이 1초 이상 지속될 경우에만 로딩 화면(SplashScreen 또는 PendingUI) 표시
• 네트워크가 빠른 경우, 로딩 화면을 건너뛰고 바로 콘텐츠 표시
• 컴포넌트 단위에서도 로딩 스피너의 지연 렌더링 처리

구현 구조

1. 전역 로딩 상태 관리 (App.tsx)

최상위 App 컴포넌트에서 초기 로딩(Splash)과 페이지 전환 로딩(PendingUI)을 다음과 같이 제어했습니다.

초기 진입 로딩 (SplashScreen)

• 앱이 처음 로딩될 때 1초 이내에 준비되면 Splash를 표시하지 않음
• setTimeout으로 1초 이상 걸릴 때만 shouldShowSplash 상태를 true로 설정

페이지 전환 로딩 (PendingUI)

• React Router의 useNavigation()을 사용해 navigation.state를 추적
• idle 상태가 아니고 1초 이상 경과하면 PendingUI 표시

// src/App.tsx

const App = () => {
  const navigation = useNavigation();
  const isNavigating = navigation.state !== 'idle';
  const [isInitialLoading, setIsInitialLoading] = useState(true);
  const [shouldShowSplash, setShouldShowSplash] = useState(false);
  const [showPendingUI, setShowPendingUI] = useState(false);

  // ⏱ Splash 지연 표시
  useEffect(() => {
    if (!isInitialLoading) return;
    const timer = setTimeout(() => {
      setShouldShowSplash(true);
    }, 1000);
    if (!isNavigating) {
      clearTimeout(timer);
      setIsInitialLoading(false);
    }
    return () => clearTimeout(timer);
  }, [isInitialLoading, isNavigating]);

  // ⏱ PendingUI 지연 표시
  useEffect(() => {
    if (isInitialLoading) return;
    let timer: ReturnType<typeof setTimeout>;
    if (isNavigating) {
      timer = setTimeout(() => {
        if (isNavigating) {
          setShowPendingUI(true);
        }
      }, 1000);
    } else {
      setShowPendingUI(false);
    }
    return () => clearTimeout(timer);
  }, [isNavigating, isInitialLoading]);

  // 렌더링 조건
  if (isInitialLoading && shouldShowSplash) return <SplashScreen />;
  if (isInitialLoading) return null;

  return (
    <div className='flex min-h-screen flex-col'>
      {showPendingUI && <PendingUI />}
      <Outlet />
    </div>
  );
};

2. 컴포넌트 단위 로딩 (LoadingSpinner)

지연 렌더링이 가능한 공통 로딩 스피너

• appearAfter prop으로 몇 밀리초 후에 표시할지 설정 (기본값: 1000ms)
• 컴포넌트가 빠르게 로드되면 스피너를 표시하지 않아 UX 깜빡임 방지

// src/components/common/loadingStatus/LoadingSpinner.tsx

const LoadingSpinner = ({ appearAfter = 1000 }: LoadingSpinnerProps) => {
  const [shouldRender, setShouldRender] = useState(appearAfter === 0);

  useEffect(() => {
    if (appearAfter === 0) return;

    const timer = setTimeout(() => {
      setShouldRender(true);
    }, appearAfter);

    return () => clearTimeout(timer);
  }, [appearAfter]);

  if (!shouldRender) return null;

  return (
    <div className='flex items-center justify-center'>
      {/* 로딩 애니메이션 */}
    </div>
  );
};

3. 사용 예시: 사이드바에서 로딩 시

• API 요청을 통해 대시보드 목록 등을 불러올 때 로딩 스피너 사용
• appearAfter를 설정하여 빠르게 응답되는 경우에는 로딩 UI를 생략하여 UX 향상

// src/components/common/sidebar/index.tsx

const Sidebar = () => {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <aside className='relative'>
      {/* 콘텐츠 */}
      {isLoading && (
        <div className='absolute inset-0 z-10 flex items-center justify-center'>
          <LoadingSpinner appearAfter={1000} />
        </div>
      )}
    </aside>
  );
};

성과

UX 개선	설명
로딩 화면 최소화	빠른 네트워크에서 불필요한 Splash/Pending UI 표시 방지
화면 깜빡임 제거	setTimeout을 활용한 지연 표시로 렌더링 흔들림 방지
컴포넌트 단위 최적화	필요한 위치에서만 지연된 로딩 스피너 표시
사용자 집중 유지	작업 흐름에 방해가 되지 않도록 부드러운 전환 제공

로딩 영상

splash, pendingUI
spinner