수평 로딩 슬라이더

참고로, 최근 XenForo에는 항상 로딩 슬라이더가 있었다는 걸 떠올랐습니다. Discourse에도 이제 비슷한 기능이 생겼으니 기쁩니다. :slight_smile:

네트워크 상태가 나쁠 때 어떤 것이 훨씬 더 귀찮을지 궁금합니다.

훌륭해요! :heart_eyes:

1개의 좋아요

원하는 경우 Chrome의 f12 콘솔을 사용하여 네트워크 상태가 나쁜 상황을 시뮬레이션할 수 있습니다.

4개의 좋아요

iPhone 6s 업데이트:

다크 테마를 적용했을 때 매우 좋습니다. 모바일에서 다른 많은 테마들도 마찬가지입니다.

잘 만들어주셨네요!

데스크톱 업데이트:

27인치와 34인치 ROG 모니터를 사용하는 크로미움 브라우저에서 로드 슬라이더가 여전히 거의 보이지 않습니다.

모바일/데스크톱에 따라 테마를 활성화/비활성화할 수 있는 옵션을 제공해 주실 수 있을까요?

1개의 좋아요

나도 똑같이 말하고 싶다 :smiley: 정말 좋은 선택지야.

1개의 좋아요

페이스북 로그인을 사용할 경우 이 문제를 재현할 수 있습니다. 이 URL 파라미터 #_=_가 원인으로 보입니다.

4개의 좋아요

discourse-topic-list-previews 플러그인을 비활성화하면 로딩 슬라이더 관련 모든 문제가 해결되는 것을 발견했습니다. 다시 활성화하면 문제가 즉시 재발합니다.

우리는 서드파티 로그인을 사용하지 않고 있으므로, 이는 별도의 버그일 가능성이 높습니다(혹은 어떤 식으로든 연결되어 있는 건가요?).

수정: 사실 두 플러그인이 모두 활성화된 상태에서는, discourse-topic-list-previews가 기본 이미지를 대체할 이미지를 찾은 토픽과 카테고리 페이지에서만 화면이 흐릿하게 유지되는 것으로 확인됩니다.

2개의 좋아요

모바일과 데스크톱에서 다양한 테마로 테스트를 이어본 결과, 이 멋진 슬라이더에 대해 다음과 같은 설정이 좋은 결과를 주는 것 같습니다:

  height: 4px;
  
  @media only screen and (min-width: 960px) {
        height: 7px;
  }

기본값에 픽셀 하나(3px에서 4px로)를 추가하면 모바일에서 아주 잘 보입니다. 그리고 5px 이상인 더 큰 데스크톱 화면에서도 괜찮아 보였지만, 지금은 7px으로 정했습니다 :slight_smile:

시간이 날 때마다 이 부분을 더 다듬어 볼 생각입니다. ‘큰’ 데스크톱과 제 아이폰에서 다양한 테마로 테스트를 진행할 예정입니다.

1개의 좋아요

첫 번째 부분에 대해 다시 생각해 주시겠어요? 데스크톱에서 직접 사용해 보니, 슬라이더보다 페이드 아웃이 더 신경 쓰였습니다. B 페이지로 이동하는 링크를 클릭할 때, A 페이지가 즉시 사라지기를(Discourse가 예전에 하던 방식) 또는 B 페이지가 나타날 때까지 그대로 머물러 있기를(일반적인 웹 페이지처럼) 기대하기 때문인 것 같습니다.

3개의 좋아요

안녕하세요, 이 코드를 사용하여 투명도를 비활성화할 수 있습니다. 관리자에서 새 컴포넌트를 생성하고 이 코드를 일반 섹션에 추가하세요. :slight_smile:

body.loading #main-outlet {
  opacity: 1 !important;
}
5개의 좋아요

하지만 그 시점에서 스피너(spinner)보다 이 기능의 가치는 무엇일까요? 단순히 로딩 슬라이더를 보는 것인가요?

2개의 좋아요

이것은 페이딩 효과를 비활성화하는 것입니다. 첫 번째 버전이었습니다. 페이딩 효과 없이 상단 슬라이더만 있는 상태입니다.

2개의 좋아요

어떤 의미에서는 그렇죠.

첫 번째 시도는… 링크를 클릭했을 때 슬라이더를 제외하고는 시각적 피드백이 전혀 없었습니다. 이건 이상적이진 않았죠.

클릭 시 불투명 페이지를 사용할지, 아니면 빈 페이지를 사용할지는 아직 결정하지 못했습니다. 분명히 약간 산만할 수 있다는 점에는 동의합니다. 클릭 시 0으로 페이드아웃하는 방식이 더 나을 수도 있겠네요… 확신은 없습니다.

6개의 좋아요

네, 저도 그렇게 생각합니다. 정말 어렵네요… 모든 사람에게 변경 가능한 효과가 좋은 방법이 될 수 있겠어요. :slightly_smiling_face:

개인적으로는 이 페이드 효과도 정말 마음에 듭니다. :slight_smile:

불투명도 0으로 설정하는 것의 유일한 문제는 이 시점에서 main-outlet에만 적용된다는 점입니다. header와 below-site-header는 여전히 표시됩니다.

1개의 좋아요

개인적으로 페이드 효과(적어도 데스크톱에서)에 대해 느끼는 불편함을 표현해 보고 싶네요. @awesomerobot / @david

페이드된 텍스트를 읽기가 정말 어렵습니다. 그래서 이제 모든 전환 시마다 뇌가 순간적으로 페이드된 텍스트를 읽도록 강제당하는데, 이게 좀 피로하네요.

아예 사라지는 방식으로 페이드가 되면 나을 수도 있지만, 확신은 없습니다. 문제의 일부는 제 레이턴시가 250ms라는 점이기도 해서, 최소 300ms 정도는 대기하게 되고, 그 결과 페이드된 글자를 바라보는 시간이 반드시 발생하게 됩니다.

12개의 좋아요

참고로,

본문 전환(페이드 텍스트)을 주석 처리했는데, 본문 전환이 없을 때 더 괜찮아 보이고(아마 더 빠르게 느껴지는 것 같기도 하고)…

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }
2개의 좋아요

고마워, 돈. 그거면 충분해 :grin:

2개의 좋아요

네, 모바일에서는 페이드 효과가 슬라이더를 더 좋게 만들었다고 생각했지만, 페이드가 도입되기 전에 데스크톱에서는 제대로 살펴본 적이 없었습니다. (데스크톱에서는 페이드 효과가 짜증스럽게 느껴졌습니다.)

모바일 기기에서만 페이딩 효과를 활성화하는 건 어떨까요? 로딩 슬라이더가 사파리를 많이 떠올리게 해요. :slight_smile:

1개의 좋아요