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

Display error in directory when readdir fails

src/UI/UIWindow.js

@@ -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>`;

src/css/style.css

@@ -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;

src/helpers.js

@@ -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();
     });
 }