[BUG] did connect 界面在store 上出现白屏，过了相当长时间才恢复

[mave99a]

🐛 Bug Report

详细描述

did connect 界面在store 上出现白屏（见下面的截屏），感觉什么阻塞了渲染，页面是可以卷滚的。

过了相当长时间后（几分钟）可以全部显示。一旦能显示后，did connect界面出现很快。

但refresh 页面后，依然会出现这种问题。 感觉不像网络问题

复现这个bug

截图或报错信息(可选)

异常的行为

期望的行为

可能的解决方案(可选)

[mave99a]

一个视频演示全部的过程：

https://share.descript.com/view/R48AeBX3SXU

[donotlb]

问题定位到是 blocklet 详情页中 "公开实例" 发出的检测请求导致的,

下面 2 种方法都可以在 store 中复现问题:

1. 在 detail 页面调用 ping 方法, 调用时机越早, 会发现页面样式破坏越严重

   const ping = () => {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
     link.type = 'text/css';
     link.href = 'https://e06dcb67-znkpr1wexxiccukzcbdb55t81z37u2mqh6l4.did.abtnet.io/';
     document.body.appendChild(link);
   };

2. 直接在 index.html body 底部插入下面的代码:

   <link
     rel="stylesheet"
     type="text/css"
     href="https://1e06dcb67-znkpr1wexxiccukzcbdb55t81z37u2mqh6l4.did.abtnet.io/" />

---

这个问题只在 safari 存在, 感觉是 safari 加载外部 css 时一直处于 pending 状态, 阻塞了 css 的渲染, 搜了下暂时没找到相关的 safari bug.

---

@frmachao 有时间可以测一下，看来基于动态加载 css 来检测服务可用性的逻辑 需要去除

https://github.com/blocklet/blocklet-store/issues/698

[wangshijun]

我没太理解这个检测为何会阻塞页面加载，是检测注入的 link 标签时机过早导致的？如果是，应该延后 @frmachao

[wangshijun]

@donotlb 请帮忙验证下是否恢复

[donotlb]

test store 上问题已经解决

[donotlb]

我没太理解这个检测为何会阻塞页面加载，是检测注入的 link 标签时机过早导致的？如果是，应该延后

1. safari 上这个检测手段无法正常工作，safari 一看加载的 css 内容是个 html, 直接报错了
2. 我的理解是，一直处于 pending 状态的外部 css 加载，会阻塞后续 css 的正常渲染，这里出问题的是 did connect 弹窗，弹窗是用户手动触发的，弹窗的时机会更晚

这个问题先 close 了