Unexpected Loading... in the search field

[Keith-CY]

Environment: Testnet

Reported by users but I cannot reproduce it

[FrederLu]

After searching for information using the top bar, a Loading... message will appear. At this time, if you do not delete the search box loading..., direct search will not be able to find results because it contains undeleted information.

2024-01-02.11.34.31.mov

[Sven-TBD]

@zhangyouxin Hi Youxin, we can change the UX to a new one, that is , while loading , and the user click the textbox , the string "loading ..." is selected by default. And we should change the color into grey.

If possible, please keep the dots appear and disappear so that the loading could be more vivid.

Hi Youxin，我们可以改一下这里的交互，即在加载时，如果用户点击文本框，"加载中..." 字符串将默认被选中。然后这里"loading..."颜色应该更改为灰色。

可以尝试让Loading ... 后面三个点动起来（从1个到3个再到1个这样），这样加载就能更加生动一点。

[zhangyouxin]

@zhangyouxin Hi Youxin, we can change the UX to a new one, that is , while loading , and the user click the textbox , the string "loading ..." is selected by default. And we should change the color into grey.

If possible, please keep the dots appear and disappear so that the loading could be more vivid.

Hi Youxin，我们可以改一下这里的交互，即在加载时，如果用户点击文本框，"加载中..." 字符串将默认被选中。然后这里"loading..."颜色应该更改为灰色。

可以尝试让Loading ... 后面三个点动起来（从1个到3个再到1个这样），这样加载就能更加生动一点。

Screen.Recording.2024-01-15.at.12.58.12.mov

视频显示的是，在“搜索中”状态是，尝试选中 "加载中..." 字符，并且把 “bbb” 改为 “c”， 但页面跳转后， url 里的 query 字段回到了 “bbb”， 这意味着我们需要在检测到加载状态是，如果用户有新的输入，则取消掉前一个搜索，用以避免前一个搜索结果的返回

我的建议是在 loading 状态，可以禁用输入，并且用 spinner 动画来代替 “loading” 字样，这将使得逻辑更简单

[zhangyouxin]

PR: Magickbase/ckb-explorer-frontend#209