看起来不错!
点击此菜单上的链接(下拉菜单之外)仍然会显示加载图标:
目前设置为 2px,但如果你使用的是带缩放的 HiDPI 显示器(例如 Retina MacBook),在你的屏幕上它可能会更接近 1px。我会在今天将其调整为 3px。
你说得对,目前这确实有些不一致的用户体验。从技术角度来看,这个问题比较棘手。当前的加载滑块是绑定到 Ember 路由器的,因此它仅在 Ember 路由切换时显示。UI 中的一些“加载”状态实际上并不是 Ember 路由切换……我们需要思考如何使其更加一致。
我非常期待高 DPI 支持。或许可以给站点管理员一个选择:是保留加载滑块,还是采用一个全新的旋转圆圈(咳咳: wink:)?
现在已增加到 3px,因此应该会更明显一些。
管理员可以通过主题组件自定义所有内容,因此如果站点希望保留加载旋转动画,这也是可以实现的 ![]()
@meghna 发布了 Custom Loading Spinner Component FontAwesome SVG 图标的好方法,这些图标在所有 DPI 级别下都能正常工作。
我绝对喜欢这个功能,并且同意 @codinghorror 的观点,应该将其作为默认选项移入核心。
我想这个问题已经解决了——所有主题列表视图中都不应再显示加载图标。
在 iPad 上,加载滑块完全不显示。(第 5 代 iPad……我想是。iOS 14,DiscourseHub 应用)

参见上方的 GIF 动图。
发现得很及时,谢谢 @CaptainZac。我已进行了一些调整,现在它应该能在 iPad 上的 PWA/DiscourseHub 视图中正常工作了。
我还为 DiscourseHub 在 iPhone 上添加了所需的 1px top 值。现在,完整的 3px 高度在应用中可见,并且似乎与 DiscourseHub 自身的滑块相当匹配。
我非常喜欢
做得真棒!![]()
点击 Logo 时,首页似乎未激活加载滑块,而是显示了旋转加载器。
太好了,开始使用吧——谢谢!
现已解决,谢谢!
滑块的问题在于,它们实际上可能让人感觉更慢(即使页面加载得更快)。
原因在于,在页面完全加载之前,页面的大部分内容都不会有任何变化;这与加载旋转图标版本形成对比,后者在点击后会立即使页面变空白——也就是说,前者是延迟后才发生重要变化,而后者是立即发生重要变化。
没错,确实如此,这也是我们内部一直在讨论的问题。保留所有旧内容在屏幕上意味着点击链接后没有即时反馈。我刚刚推送了一个更改,在加载期间(部分)淡出页面内容。(cc @awesomerobot)
最初我打算让它完全淡出,但那样我们只会看到空白页面。我认为将其保持在 20% 不透明度可能是一个不错的折中方案。既能提供足够的反馈,又不会过于突兀?![]()
目前它会淡出整个 #main-outlet。不幸的是,我认为无法直接针对实际正在加载的路由的 {{outlet}} 进行定位……但我非常希望被证明是错的。我认为唯一的解决方案是将代码中所有的 {{outlet}} 替换为自定义的包装组件……
越来越棒了……![]()
进阶玩法:记录请求的平均耗时,并将淡出动画的时长设置为相同时间 ![]()
太好了。看起来好多了。![]()
![]()
虽然 David 更好,但整体“感觉”还是更慢。说实话,除非效果像加载动画那样明显,否则这种情况恐怕不会改变。这也可能是滑块本身的特性,尤其是当它总是能完整播放时。因为页面加载完成(或看起来已完成)时,滑块可能还在播放……但由于滑块非常显眼,它反而成了页面加载的指示器,而不是页面本身。
https://meta.discourse.org/u/golaxo/summary
如果从个人资料页面点击 Discourse 标志,顶部区域会消失,这看起来很奇怪。