Skip to content
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

Files busy signal #3973

Merged
merged 7 commits into from
Nov 27, 2024
Merged

Files busy signal #3973

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1f0b267
Add table loading spinner
ahmed-mgd Nov 19, 2024
2e2f011
Implement busy signal on table reload
ahmed-mgd Nov 19, 2024
40fd19d
Separate spinner into partial
ahmed-mgd Nov 21, 2024
fccde1f
Improve logic for hiding/showing spinner
ahmed-mgd Nov 21, 2024
256f33a
Merge branch 'master' of ood:OSC/ondemand into files-busy-signal
ahmed-mgd Nov 21, 2024
b008fac
Add sleep for deleting file test
ahmed-mgd Nov 26, 2024
40d8a10
Fix padding
ahmed-mgd Nov 26, 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
10 changes: 9 additions & 1 deletion apps/dashboard/app/javascript/files/data_table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const EVENTNAME = {
};

const CONTENTID = '#directory-contents';
const BUSYID = '#tloading-spinner';
Copy link
Contributor

Choose a reason for hiding this comment

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

I know we use hyphens in other places, but we're trying to enforce snake_case Ids now.


let table = null;

Expand Down Expand Up @@ -269,6 +270,9 @@ class DataTable {
async reloadTable(url) {
var request_url = url || history.state.currentDirectoryUrl;

$(CONTENTID).hide();
$(BUSYID).show();

try {
const response = await fetch(request_url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' });
const data = await this.dataFromJsonResponse(response);
Expand Down Expand Up @@ -297,7 +301,11 @@ class DataTable {
table.getTable().row(this.closest('tr')).deselect();
}
}
})
});

$(BUSYID).hide();
$(CONTENTID).show();

return result;
} catch (e) {
const eventData = {
Expand Down
7 changes: 7 additions & 0 deletions apps/dashboard/app/views/files/_files_table.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@
<tbody>
</tbody>
</table>

<div class="text-center text-primary" style="display:none" id="tloading-spinner">
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of inline styles, we should be using the class d-none. inline styles are a CSP violation (or at least will be at some point) so we should avoid using them.

So I think instead of the jQuery API for hide & show, we should just edit the classList in plain javascript.

// API to add to remove from the classList
document.getElementById('directory-contents').classList.remove('d-none');

// API to add to the classList
document.getElementById('directory-contents').classList.add('d-none');

<div class="spinner-border">
<span class="visually-hidden">Loading...</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Never seen visually-hidden before, but we tend to use sr-only.

</div>
</div>

</div>
</div>

Expand Down
Loading