[Open WebUI] RecursiveFolder 컴포넌트 지연 로딩으로 페이지 로드 속도 개선

PR #18179 - feat: do not initiate requests when the RecursiveFolder is not open to speed up page loading

들어가며

Open WebUI의 사이드바에서 RecursiveFolder 컴포넌트는 폴더 구조를 재귀적으로 렌더링합니다. 기존에는 폴더가 닫혀 있어도 하위 항목을 미리 요청했는데, 폴더 계층이 깊어질수록 초기 페이지 로드 시 수십~수백 개의 불필요한 API 요청이 발생했습니다.

핵심 코드 분석

Before

$: setFolderItems(open);

open 상태와 관계없이, 반응형 선언문이 setFolderItems를 항상 호출합니다. open이 false여도 함수에 인자로 전달되어 실행됩니다.

After

$: if (open) {
    setFolderItems();
}

open이 true일 때만 하위 항목을 요청합니다.

왜 이게 좋은가

1. 초기 로드 API 요청 감소: 닫힌 폴더의 하위 항목을 미리 요청하지 않으므로, 초기 페이지 로드 시 API 호출 수가 열린 폴더 수만큼으로 줄어듭니다.
2. 재귀적 효과: 상위 폴더가 닫혀 있으면 그 아래의 모든 하위 폴더도 요청하지 않으므로, 깊은 폴더 구조에서 효과가 기하급수적으로 커집니다.
3. 사용자 경험 개선: 실제로 열어보지 않는 폴더의 데이터를 미리 로드하지 않으므로 페이지 응답이 빨라집니다.
4. 3줄 변경: 극도로 간단한 수정으로 상당한 성능 개선을 달성합니다.

참고 자료

• Svelte 반응형 선언문
• Lazy Loading 패턴