mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #219 from HeyPuter/eric/2024-04-02/display-directory-load-error

Browse Source 
Display error in directory when readdir fails
This commit is contained in:
Nariman Jelveh 2024-04-02 15:44:44 -07:00 committed by GitHub
commit 5fab338ba1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/UI/UIWindow.js
View File

@ -311,6 +311,8 @@ async function UIWindow(options) {
// Add 'This folder is empty' message by default
h += `<div class="explorer-empty-message">This folder is empty</div>`;
h += `<div class="explorer-error-message">Error message is missing</div>`;
// Loading spinner
h += `<div class="explorer-loading-spinner">`;
h +=`<svg style="display:block; margin: 0 auto; " xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#212121" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#212121" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`;

8
src/css/style.css
View File

@ -721,6 +721,14 @@ span.header-sort-icon img {
display: none;
}
.explorer-error-message {
text-align: center;
margin-top: 20px;
color: #935c5c;
-webkit-font-smoothing: antialiased;
display: none;
}
.explorer-loading-spinner {
margin-top: 20px;
font-size: 13px;

18
src/helpers.js
View File

@ -1165,6 +1165,8 @@ window.refresh_item_container = function(el_item_container, options){
let el_window = $(el_item_container).closest('.window');
let el_window_head_icon = $(el_window).find('.window-head-icon');
const loading_spinner = $(el_item_container).find('.explorer-loading-spinner');
const error_message = $(el_item_container).find('.explorer-error-message');
const empty_message = $(el_item_container).find('.explorer-empty-message');
if(options.fadeInItems)
$(el_item_container).css('opacity', '0')
@ -1177,6 +1179,9 @@ window.refresh_item_container = function(el_item_container, options){
// is already loaded.
$(loading_spinner).hide();
// Hide the error message in case it's visible
$(error_message).hide();
// current timestamp in milliseconds
let start_ts = new Date().getTime();
@ -1369,6 +1374,19 @@ window.refresh_item_container = function(el_item_container, options){
// This makes sure the loading spinner shows up if the request takes longer than 1 second
// and stay there for at least 1 second since the flickering is annoying
(Date.now() - start_ts) > 1000 ? 1000 : 1)
}).catch(e => {
// clear loading timeout
clearTimeout(loading_timeout);
// hide other messages/indicators
$(loading_spinner).hide();
$(empty_message).hide();
// UIAlert('Failed to load directory' + (e && e.message ? ': ' + e.message : ''));
// show error message
$(error_message).html('Failed to load directory' + (e && e.message ? ': ' + e.message : ''));
$(error_message).show();
});
}