add old message for empty results to cards list.

html/extra-networks-pane.html

@@ -130,7 +130,8 @@
                     class='extra-network-tree styled-scrollbar clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'
                         class='extra-network-tree-content clusterize-content'>
-                        <div class="clusterize-no-data">Loading...</div>
+                        <div class="clusterize-loading">Loading...</div>
+                        <div class="clusterize-no-data">No Data</div>
                     </div>
                 </div>
             </div>
@@ -139,7 +140,8 @@
                     class='extra-network-cards styled-scrollbar clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
                         class='extra-network-cards-content clusterize-content'>
-                        <div class="clusterize-no-data">Loading...</div>
+                        <div class="clusterize-loading">Loading...</div>
+                        <div class="clusterize-no-data">{no_cards_html}</div>
                     </div>
                 </div>
             </div>

javascript/clusterize.js

@@ -19,6 +19,8 @@ class Clusterize {
     content_elem = null;
     scroll_id = null;
     content_id = null;
+    no_data_class_default = "clusterize-no-data";
+    loading_class_default = "clusterize-loading";
     options = {
         rows_in_block: 50,
         cols_in_block: 1,
@@ -26,12 +28,15 @@ class Clusterize {
         tag: null,
         id_attr: "data-div-id",
         show_no_data_row: true,
-        no_data_class: "clusterize-no-data",
-        no_data_text: "No data",
-        loading_data_text: "Loading...",
+        no_data_class: this.no_data_class_default,
+        loading_class: this.loading_class_default,
         keep_parity: true,
         callbacks: {},
     };
+    loading_html_default = `<div class="${this.loading_class_default}">Loading...</div>`;
+    no_data_html_default = `<div class="${this.no_data_class_default}">No Data</div>`;
+    loading_html = null;
+    no_data_html = null;
     setup_has_run = false;
     enabled = false;
     #is_mac = null;
@@ -100,6 +105,9 @@ class Clusterize {
         this.#max_items = args.max_items;
 
         this.#on_scroll_bound = this.#onScroll.bind(this);
+
+        this.loading_html = args.loading_html;
+        this.no_data_html = args.no_data_html;
     }
 
     // ==== PUBLIC FUNCTIONS ====
@@ -125,12 +133,13 @@ class Clusterize {
         this.setup_has_run = true;
     }
 
-    clear(custom_text) {
+    clear(custom_html) {
         if (!this.setup_has_run || !this.enabled) {
             return;
         }
 
-        this.#html(this.#generateEmptyRow(custom_text).join(""));
+        custom_html = custom_html || this.no_data_html;
+        this.#html(custom_html);
     }
 
     destroy() {        
@@ -138,7 +147,7 @@ class Clusterize {
         this.#teardownElementObservers();
         this.#teardownResizeObservers();
 
-        this.#html(this.#generateEmptyRow().join(""));
+        this.#html(this.no_data_html);
         
         this.setup_has_run = false;
     }
@@ -276,6 +285,23 @@ class Clusterize {
         if (!this.options.tag) {
             this.options.tag = this.content_elem.children[0].tagName.toLowerCase();
         }
+
+        if (!isString(this.loading_html)) {
+            const loading_elem = this.content_elem.querySelector(`.${this.options.loading_class}`);
+            if (isElement(loading_elem)) {
+                this.loading_html = loading_elem.outerHTML;
+                loading_elem.remove();
+            }
+        }
+
+        if (!isString(this.no_data_html)) {
+            const no_data_elem = this.content_elem.querySelector(`.${this.options.no_data_class}`);
+            if (isElement(no_data_elem)) {
+                this.no_data_html = no_data_elem.outerHTML;
+                no_data_elem.remove();
+            }
+        }
+
         this.#recalculateDims();
     }
 
@@ -290,7 +316,9 @@ class Clusterize {
         }
 
         // Get the first element that isn't one of our placeholder rows.
-        const node = this.content_elem.querySelector(":scope > :not(.clusterize-extra-row,.clusterize-no-data)");
+        const node = this.content_elem.querySelector(
+            `:scope > :not(.clusterize-extra-row,.${this.options.no_data_class},.${this.options.loading_class})`
+        );
         if (!isElement(node)) {
             // dont attempt to compute dims if we have no data.
             return;
@@ -348,30 +376,6 @@ class Clusterize {
         return Math.min(current_cluster, max_cluster);
     }
 
-    #generateEmptyRow(text, class_name) {
-        if (isNullOrUndefined(text)) {
-            text = this.options.no_data_text;
-        }
-
-        if (isNullOrUndefined(class_name)) {
-            class_name = this.options.no_data_class;
-        }
-
-        const empty_row = document.createElement(this.options.tag);
-        const content = document.createTextNode(text);
-        empty_row.className = class_name;
-        if (this.options.tag === "tr") {
-            const td = document.createElement("td");
-            // fixes #53
-            td.colSpan = 100;
-            td.appendChild(content);
-            empty_row.appendChild(td);
-        } else {
-            empty_row.appendChild(content);
-        }
-        return [empty_row.outerHTML];
-    }
-
     async #generate() {
         const rows_start = Math.max(0, (this.options.rows_in_cluster - this.options.rows_in_block) * this.#getClusterNum());
         const rows_end = rows_start + this.options.rows_in_cluster;
@@ -393,7 +397,7 @@ class Clusterize {
                 top_offset: 0,
                 bottom_offset: 0,
                 rows_above: 0,
-                rows: this_cluster_rows.length ? this_cluster_rows : this.#generateEmptyRow(),
+                rows: this_cluster_rows.length ? this_cluster_rows : [this.no_data_html],
             };
         }
 
@@ -413,12 +417,12 @@ class Clusterize {
             if (!Array.isArray(rows) || !rows.length) {
                 // This implies there is no data for this list. Not an error.
                 // Errors should be handled in the fetchData callback, not here.
-                this.#html(this.#generateEmptyRow().join(""));
+                this.#html(this.no_data_html);
                 return;
             } else {
                 this.#exploreEnvironment(rows, this.#cache);
                 // Remove the temporary item from the data since we calculated its size.
-                this.#html(this.#generateEmptyRow("Loading...").join(""));
+                this.#html(this.loading_html);
             }
         }
 

javascript/extraNetworks.js

@@ -111,6 +111,10 @@ class ExtraNetworksTab {
     refresh_in_progress = false;
     dirs_view_en = false;
     tree_view_en = false;
+    tree_list_no_data_html_bkp = null;
+    tree_list_loading_html_bkp = null;
+    cards_list_no_data_html_bkp = null;
+    cards_list_loading_html_bkp = null;
     constructor({tabname, extra_networks_tabname}) {
         this.tabname = tabname;
         this.extra_networks_tabname = extra_networks_tabname;
@@ -149,6 +153,26 @@ class ExtraNetworksTab {
         this.controls_elem.id = `${this.tabname_full}_controls`;
         controls_div.insertBefore(this.controls_elem, null);
 
+        // create backups of the no-data and loading elements for tree/cards list
+        const tree_loading_elem = this.container_elem.querySelector(
+            ".extra-network-tree .clusterize-loading"
+        );
+        const tree_no_data_elem = this.container_elem.querySelector(
+            ".extra-network-tree .clusterize-no-data"
+        );
+        const cards_loading_elem = this.container_elem.querySelector(
+            ".extra-network-cards-content .clusterize-loading"
+        );
+        const cards_no_data_elem = this.container_elem.querySelector(
+            ".extra-network-cards-content .clusterize-no-data"
+        );
+        // need to store backup of these since they are removed on clusterize clear.
+        // we re-apply them next time we call setup.
+        this.cards_list_no_data_html_bkp = cards_no_data_elem.outerHTML;
+        this.cards_list_loading_html_bkp = cards_loading_elem.outerHTML;
+        this.tree_list_no_data_html_bkp = tree_no_data_elem.outerHTML;
+        this.tree_list_loading_html_bkp = tree_loading_elem.outerHTML;
+
         await Promise.all([this.setupTreeList(), this.setupCardsList()]);
 
         const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
@@ -232,6 +256,8 @@ class ExtraNetworksTab {
                 initData: this.onInitTreeData.bind(this),
                 fetchData: this.onFetchTreeData.bind(this),
             },
+            no_data_html: this.tree_list_no_data_html_bkp,
+            loading_html: this.tree_list_loading_html_bkp,
         });
         await this.tree_list.setup();
     }
@@ -250,6 +276,8 @@ class ExtraNetworksTab {
                 initData: this.onInitCardsData.bind(this),
                 fetchData: this.onFetchCardsData.bind(this),
             },
+            no_data_html: this.cards_list_no_data_html_bkp,
+            loading_html: this.cards_list_loading_html_bkp,
         });
         await this.cards_list.setup();
     }

javascript/extraNetworksClusterize.js

@@ -106,7 +106,7 @@ class ExtraNetworksClusterize extends Clusterize {
         if (this.lru instanceof LRUCache) {
             this.lru.clear();
         }
-        super.clear("Loading...");
+        super.clear(this.loading_html);
     }
 
     async load(force_init_data) {
@@ -263,15 +263,12 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
     selected_div_id = null;
 
     constructor(args) {
-        super({
-            ...args,
-            no_data_text: "Directory is empty.",
-        });
+        super({...args});
     }
 
     clear() {
         this.selected_div_id = null;
-        super.clear("Loading...");
+        super.clear(this.loading_html);
     }
 
     async onRowSelected(elem) {
@@ -498,10 +495,7 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize {
 
 class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
     constructor(args) {
-        super({
-            ...args,
-            no_data_text: "No files matching filter.",
-        });
+        super({...args});
     }
 
     sortByPath(data) {

modules/ui_extra_networks.py

@@ -759,6 +759,16 @@ class ExtraNetworksPage:
                 include_hidden=shared.opts.extra_networks_show_hidden_directories,
             )
 
+        no_cards_html_dirs = "".join(
+            [f"<li>{x}</li>" for x in self.allowed_directories_for_previews()]
+        )
+        no_cards_html = (
+            "<div class='nocards'>"
+            "<h1>Nothing here. Add some content to the following directories:</h1>"
+            f"<ul>{no_cards_html_dirs}</ul>"
+            "</div>"
+        )
+
         # Now use tree roots to generate a mapping of div_ids to nodes.
         # Flatten roots into a single sorted list of nodes.
         # Directories always come before files. After that, natural sort is used.
@@ -794,6 +804,7 @@ class ExtraNetworksPage:
                 "tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
                 "cards_view_style": "flex-grow: 1;",
                 "dirs_html": dirs_html,
+                "no_cards_html": no_cards_html,
             }
         )
 

style.css

@@ -946,6 +946,7 @@ footer {
 
 .extra-network-pane .nocards li{
     margin-left: 0.5em;
+    text-align: left;
 }
 
 .extra-network-pane .card .button-row{
@@ -1216,6 +1217,11 @@ body.resizing .resize-handle {
     color: var(--input-placeholder-color) !important;
 }
 
+.clusterize-loading {
+    text-align: center;
+    color: var(--input-placeholder-color) !important;
+}
+
 .extra-network-pane {
     display: flex;
     flex-direction: column;