수평 로딩 슬라이더

좋아 보입니다!

이 메뉴의 링크를 클릭할 때(드롭다운 메뉴가 아닌 경우)에도 여전히 스피너가 표시됩니다:

1개의 좋아요

현재 2px로 설정되어 있지만, hidpi 디스플레이에서 확대가 적용된 경우(예: Retina MacBook)에는 화면에서 1px에 더 가깝게 보일 수 있습니다. 오늘 3px로 높일 예정입니다.

맞습니다, 현재로서는 다소 일관성이 없는 UX입니다. 기술적인 관점에서 처리하기가 까다로운 부분입니다. 로딩 슬라이더는 현재 Ember 라우터에 연결되어 있어, Ember 라우트 전환 시에만 표시됩니다. UI 내부의 일부 ‘로딩’ 상태는 실제로 Ember 라우트 전환이 아니기 때문에… 이를 더 일관되게 만들 수 있는 방법에 대해 생각해 볼 필요가 있습니다.

9개의 좋아요

고해상도(DPI) 지원이 정말 기대됩니다. 사이트 관리자에게 로딩 슬라이더 대신, 혹은 새로 다듬은 회전 원형 로더(기침 기침 :wink:)를 선택할 수 있는 옵션을 주는 건 어떨까요?

1개의 좋아요

이제 3px로 조정되었으니, 조금 더 눈에 띄어야 합니다.

관리자는 테마 구성 요소를 통해 모든 것을 커스터마이즈할 수 있으므로, 사이트가 로딩 스피너를 유지하길 원한다면 그렇게 할 수 있습니다 :slight_smile:

12개의 좋아요

@meghna 님이 Custom Loading Spinner Component 를 게시했습니다. 이 게시물은 모든 DPI 수준에서 작동하는 FontAwesome SVG 아이콘을 활용하는 좋은 방법입니다.

7개의 좋아요

이 기능은 정말 마음에 들고, @codinghorror의 의견에 동의합니다. 기본 설정으로 코어에 포함해야 한다고 생각합니다.

20개의 좋아요

해결한 것 같습니다 - 모든 토픽 목록 보기에서 로딩 스피너가 사라졌을 것입니다

9개의 좋아요

아이패드에서는 로딩 슬라이더가 아예 표시되지 않습니다. (아이패드 5세대…인 것 같습니다. iOS 14, DiscourseHub 앱)

image

gif를 확인해 주세요 ^

5개의 좋아요

좋은 지적 감사합니다, @CaptainZac. iPad에서 PWA/DiscourseHub 뷰에서 정상적으로 작동하도록 몇 가지 조정을 했습니다.

또한 iPhone에서 DiscourseHub에 필요한 1px의 top 값을 추가했습니다. 이제 앱에서 전체 3px 높이가 표시되며, DiscourseHub 자체의 슬라이더와 상당히 잘 맞는 것으로 보입니다.

7개의 좋아요

정말 마음에 들어 :+1: 정말 잘했어요! :slightly_smiling_face:

2개의 좋아요

로고를 클릭하면 홈 페이지에서 스피너 로더 대신 로딩 슬라이더가 활성화되지 않는 것 같습니다.

4개의 좋아요

완벽합니다, 바로 사용하세요 - 감사합니다!

2개의 좋아요

지금 해결되었을 것입니다. 감사합니다!

7개의 좋아요

슬라이더의 문제는 실제로 더 느리게 느껴질 수 있다는 점입니다(페이지 로딩 속도가 빨라도 마찬가지입니다).

그 이유는 페이지 로딩이 완료될 때까지 페이지의 대부분에서는 아무 일도 일어나지 않기 때문입니다. 이는 로딩 스피너 버전을 대조적으로 보여줍니다. 로딩 스피너 버전에서는 클릭 직후 페이지가 즉시 비어 보이므로, 즉각적으로 의미 있는 변화가 일어나는 것입니다. 반면 슬라이더 방식에서는 지연 후에야 의미 있는 변화가 발생합니다.

6개의 좋아요

네, 맞아요. 우리도 내부적으로 그걸로 논의하고 있었거든요. 기존 콘텐츠가 전부 화면에 남아 있으면 링크를 클릭한 직후 피드백을 바로 받을 수 없거든요. 방금 로딩 중 페이지 콘텐츠를 (부분적으로) 페이드아웃시키는 변경 사항을 푸시했어요. (cc @awesomerobot)

처음엔 완전히 페이드아웃되게 했는데, 그렇게 하면 결국 빈 페이지만 남게 되더라고요. 20% 투명도로 유지하는 게 좋은 중간책이 아닐까 싶어요. 충분한 피드백을 주면서도 너무 거슬리지 않을 것 같아서요. :thinking:

현재는 #main-outlet 전체를 페이드아웃시키고 있어요. 실제로 로딩 중인 라우트의 {{outlet}}만 타겟팅하는 방법이 있는지는 모르겠어요… 하지만 반박해 주시면 좋겠네요. 유일한 해결책은 코드 안의 모든 {{outlet}}을 커스텀 래퍼 컴포넌트로 교체하는 것일 것 같아요…

18개의 좋아요

더욱더 좋아지고 있어요… :sunglasses:

7개의 좋아요

다음 단계 플레이: 요청이 평균적으로 얼마나 걸리는지 기록하고, 페이드 애니메이션도 동일한 시간 동안 진행되도록 설정하세요 :rofl:

14개의 좋아요

좋아요. 훨씬 더 좋아 보입니다. :100::+1:

3개의 좋아요

데이비드, 지금은 훨씬 나아졌지만 여전히 느리게 느껴져. 솔직히 말해서, 스피너처럼 효과가 극적으로 드러나지 않는 한 이 문제는 바뀌지 않을 것 같아. 슬라이더 자체의 특성일 수도 있고, 특히 슬라이더가 항상 완료되는 경우라면 더 그럴 거야. 슬라이더가 완료되기 전에 페이지가 이미 로딩을 마쳤거나 마친 것처럼 보일 수 있거든… 그런데 페이지 로딩의 지표는 페이지 자체가 아니라, 너무 눈에 띄기 때문에 슬라이더가 되거든.

6개의 좋아요

https://meta.discourse.org/u/golaxo/summary
프로필 보기에서 Discourse 로고를 클릭하면 상단 부분이 사라지는데, 이게 좀 이상해 보입니다.

3개의 좋아요