Skip to content

Don't show loading indicators when refreshing the system status #30712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Apr 27, 2024
Merged

Don't show loading indicators when refreshing the system status #30712

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1f4ad26
Don't show loading indicators when refreshing the system status
yardenshoham Apr 26, 2024
69da05d
Update templates/admin/dashboard.tmpl
yardenshoham Apr 26, 2024
ae8061b
Add hidden div
yardenshoham Apr 26, 2024
2a8de1e
Update templates/admin/dashboard.tmpl
yardenshoham Apr 26, 2024
9f76d74
hidden -> no
yardenshoham Apr 26, 2024
12b1301
Merge branch 'main' into fix-htmx-hidden
wxiaoguang Apr 27, 2024
9cccd81
Merge branch 'main' into fix-htmx-hidden
wxiaoguang Apr 27, 2024
4ba0435
Merge branch 'main' into fix-htmx-hidden
GiteaBot Apr 27, 2024
4795059
Merge branch 'main' into fix-htmx-hidden
GiteaBot Apr 27, 2024
c813bee
Update templates/admin/dashboard.tmpl
silverwind Apr 27, 2024
3877f03
Update templates/admin/dashboard.tmpl
wxiaoguang Apr 27, 2024
591617d
remove useless element
silverwind Apr 27, 2024
c92de87
Update dashboard.tmpl
wxiaoguang Apr 27, 2024
9a00d63
Merge branch 'main' into fix-htmx-hidden
yardenshoham Apr 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/admin/dashboard.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
{{ctx.Locale.Tr "admin.dashboard.system_status"}}
</h4>
{{/* TODO: make these stats work in multi-server deployments, likely needs per-server stats in DB */}}
<div hx-get="{{$.Link}}/system_status" hx-swap="morph:innerHTML" hx-trigger="every 5s" hx-indicator=".divider" class="ui attached table segment">
<div hx-get="{{$.Link}}/system_status" hx-swap="morph:innerHTML" hx-trigger="every 5s" hx-indicator=".tw-hidden" class="ui attached table segment">

This comment was marked as outdated.

Sign in to view

Copy link
Contributor

@wxiaoguang wxiaoguang Apr 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually it could also use something like hx-indicator="no-indicator" , because no-indicator also matches nothing.

Or even as simple as hx-indicator="no", we would never use <no> tag in HTML code, so it also matches nothing.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But that prints an error in the console on every request

Copy link
Contributor

@wxiaoguang wxiaoguang Apr 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, then tw-hidden also doesn't seem good enough because tw-hidden might also not exist.

Ideally it could be like this:

Suggested change
<div hx-get="{{$.Link}}/system_status" hx-swap="morph:innerHTML" hx-trigger="every 5s" hx-indicator=".tw-hidden" class="ui attached table segment">
<div hx-get="{{$.Link}}/system_status" hx-swap="morph:innerHTML" hx-trigger="every 5s" hx-indicator=".hidden-loading-indicator" class="ui attached table segment">

Then put <div class="hidden-loading-indicator tw-hidden"></div> into "admin/system_status"

Then everything is clear and I think it reads better.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And more details, .tw-hidden can't be right. It just adds the indicator to all the tw-hidden elements on this page, which causes various side effects

Think about a case:

<div class="panel tw-hidden"></div>
<div hx-get hx-indicator=".tw-hidden"></div>

The "panel" is not related to the hx-get.

When the loading-indicator is added to the "panel", and the request is still running, then the user shows the panel: surprise: they sees a "loading panel".

{{template "admin/system_status" .}}
</div>
</div>
Expand Down