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 3 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
15 changes: 10 additions & 5 deletions 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,7 +10,7 @@ const EVENTNAME = {
};

const CONTENTID = '#directory-contents';
const BUSYID = '#tloading-spinner';
const SPINNERID = '#tloading_spinner';

let table = null;

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

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

try {
const response = await fetch(request_url, { headers: { 'Accept': 'application/json' }, cache: 'no-store' });
Expand Down Expand Up @@ -303,8 +302,7 @@ class DataTable {
}
});

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

return result;
} catch (e) {
Expand All @@ -316,12 +314,19 @@ class DataTable {
$(CONTENTID).trigger(SWAL_EVENTNAME.showError, eventData);

$('#open-in-terminal-btn').addClass('disabled');

this.toggleSpinner()

// Removed this as it was causing a JS Error and there is no reprocution from removing it.
// return await Promise.reject(e);
}
}

toggleSpinner() {
document.querySelector(SPINNERID).classList.toggle('d-none');
document.querySelector(CONTENTID).classList.toggle('d-none');
}

updateDotFileVisibility() {
this.reloadTable();
}
Expand Down
8 changes: 1 addition & 7 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,13 +24,7 @@
<tbody>
</tbody>
</table>

<div class="text-center text-primary" style="display:none" id="tloading-spinner">
<div class="spinner-border">
<span class="visually-hidden">Loading...</span>
</div>
</div>

<%= render partial: "spinner" %>
</div>
</div>

Expand Down
5 changes: 5 additions & 0 deletions apps/dashboard/app/views/files/_spinner.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="text-center text-primary d-none p-500" 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.

What is the p-500 class here? I can't seem to find a definition for it./

Copy link
Contributor Author

@ahmed-mgd ahmed-mgd Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Whoops I was messing around with the styling and forgot to delete that.

<div class="spinner-border">
<span class="sr-only">Loading...</span>
</div>
</div>
Loading