수평 로딩 슬라이더

커스터마이징 테마 컴포넌트
1

:police_car_light: 이 기능은 이제 Discourse 코어의 일부입니다. 활성화하려면 ‘페이지 로딩 표시기’ 설정을 사용하세요. 자세한 내용은 아래를 참조하세요.

이 테마 컴포넌트는 Discourse 코어의 로딩 스피너를 제거하고 화면 상단에 로딩 슬라이더를 배치합니다. 이는 GitHub 등 다른 사이트에서 흔히 사용하는 방식입니다. 이 방식의 장점은 페이지 전환 시 콘텐츠의 '깜빡임’이 줄어든다는 점입니다. 단, Discourse가 앱보다는 일반 웹페이지처럼 느껴질 수 있다는 단점이 있습니다.

기본 테마 컴포넌트 적용
ezgif-6-370e14693a43 ezgif-6-f4ed194f762c

알려진 문제:

  • 최신 / 인기 / 안 읽음… 드롭다운이 모바일에서 멈춤 :white_check_mark:

  • discourse-encrypt와의 호환성 문제 (예: 주제 간 전환 시 주제 제목이 멈추는 현상)
:eyeglasses: 미리보기 테마 생성자
:hammer_and_wrench: 저장소 https://github.com/davidtaylorhq/discourse-loading-slider
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마 입문자? Discourse 테마 사용 입문가이드
92개의 좋아요
Discourse Loading Time
Discourse Version 3.0
Navigation toggle persists on mobile after selection is tapped
Updating the top menu immediately without showing spinner loading for whole page
Docs keeps previous page position
Sublime Theme
2

이 방식이 훨씬 더 시각적으로 마음에 듭니다. 로딩 스피너는 좋지만, 다소 거슬립니다.

25개의 좋아요
3

메타에서 @david 님과 하루 이틀 정도 테스트해볼 수 있을까요?

16개의 좋아요
4

네, 어떤 느낌인지 한번 알아볼게요. 여기 메타에서는 활성화되어 있어요 :+1: (사람들이 이게 진행 중이라는 걸 알 수 있도록 이 주제를 임시로 고정하고 이름을 바꿨어요)

25개의 좋아요
6

개인적으로는 좋지만, 확실히 더 느리게 느껴집니다. 아마도 메타와의 지연 시간이 약 250ms이기 때문일 수도 있겠네요.

14개의 좋아요
7

솔직히 좀 애매해요. 전체 페이지가 깜빡이는 현상은 확실히 사라지긴 하는데, UI가 약간 덜 반응하는 느낌이라요 :thinking:

15개의 좋아요
8

반면, 저지연 연결에서는 페이지가 더 빠르게 느껴지는 것 같습니다. 다만 UI 반응성은 다릅니다.

13개의 좋아요
9

개인적으로는 스피너를 더 선호합니다. 솔직히 말하면 그 존재를 잘 인지하지 못했었거든요. 화면에 잠깐 떴다가 페이지가 갑자기 나타나는 방식이 마음에 듭니다. 이렇게 하면 빠릿빠릿해 보입니다. 반면, 로딩 바는 기다리고 있다는 인식을 더 강하게 심어줍니다. 이미 페이지를 읽을 수 있는 상황인데도 불구하고 여전히 로딩 바를 바라보고 있는 제 자신을 발견하곤 했죠.

페이지 로딩의 이전 단계에서 로딩이 “끝난” 것처럼 보이도록 개선할 수도 있을 것 같습니다.

혹시 기존 스피너에서 벗어나고 싶다면, 바의 원형 버전인 새로운 스피너는 어떨까요? 사라지기 직전에 360도를 채우는 방식 말입니다.

10개의 좋아요
11

이 기능은 몇 가지 다른 렌더링 버그를 드러내고 있었습니다(예: 한 주제에서 다른 주제로 직접 이동하면 OP 표시에 문제가 발생함). 당분간 Meta에서 제거했지만, OP의 테마 제작자 링크를 사용하면 여전히 사용해 볼 수 있습니다.

14개의 좋아요
13

아, 맞아요. 이건 100% 더 좋습니다. 그렇게 만들어 주세요!

17개의 좋아요
16

토픽 렌더링 버그가 이제 해결되었으므로, 메타에서 이 기능을 다시 활성화했습니다. 앞으로 어떻게 진행될지 지켜보겠습니다.

17개의 좋아요
17

정말 멋져 보여요. :+1:t2: 좋은 흐름 계속 유지하세요.

9개의 좋아요
18

바가 훨씬 더 좋아요.

6개의 좋아요
19

매우 마음에 듭니다. 다만, 커스텀 스피너는 대부분 표시되지 않습니다.
한 가지 문제가 있습니다. 현재 있는 주제나 주제 목록을 새로고침할 때 로딩 바가 사용되지 않습니다.
메타 홈에 있을 때 로고를 클릭하면 바 대신 스피너가 표시됩니다.

8개의 좋아요
20

스피너보다는 훨씬 좋습니다. 잘 만드셨네요!

그런데 로딩 바의 색상을 어떻게 설정하거나 변경하나요?

6개의 좋아요
21

현재는 컬러 스킴의 ‘quaternary’ 색상에 기반하여 설정되어 있습니다. 원하시면 CSS를 통해 개별적으로 쉽게 커스터마이징할 수 있습니다.

좋은 지적 감사합니다. 해당 상황도 오버라이드할 수 있는지 확인해 보겠습니다. :+1:

12개의 좋아요
22

궁극적으로 이 기능을 Discourse 코어에 포함하여 테마 컴포넌트가 필요 없도록 하는 것이 목표인가요?

7개의 좋아요