From 9bf8f0f0ddf320d37f9936f430c8dcc928346ae0 Mon Sep 17 00:00:00 2001
From: Mel Massadian <7041726+melMass@users.noreply.github.com>
Date: Sat, 20 Sep 2025 12:01:16 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20show=20loading=20state=20fo?=
 =?UTF-8?q?r=20I/O=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/mtb_input_output_sidebar.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/web/mtb_input_output_sidebar.js b/web/mtb_input_output_sidebar.js
index 9c17139..da9b7a2 100644
--- a/web/mtb_input_output_sidebar.js
+++ b/web/mtb_input_output_sidebar.js
@@ -560,6 +560,28 @@ if (window?.__COMFYUI_FRONTEND_VERSION__) {
 
           imgs = getImgsFromUrls(urls, imgGrid)
 
+          const loader = makeElement('div', {}, imgGrid)
+          Object.assign(loader.style, {
+            display: 'none',
+            width: '100%',
+            padding: '8px 0',
+            textAlign: 'center',
+            color: 'var(--mtb-text, #ccc)',
+            fontSize: '12px',
+          })
+          loader.textContent = 'Loading…'
+
+          const endMsg = makeElement('div', {}, imgGrid)
+          Object.assign(endMsg.style, {
+            display: 'none',
+            width: '100%',
+            padding: '8px 0',
+            textAlign: 'center',
+            color: 'var(--mtb-text, #888)',
+            fontSize: '12px',
+          })
+          endMsg.textContent = 'No more items'
+
           const sentinel = makeElement('div', {}, imgGrid)
           sentinel.style.height = '1px'
           sentinel.style.width = '100%'
@@ -568,22 +590,32 @@ if (window?.__COMFYUI_FRONTEND_VERSION__) {
           const loadNextPage = async () => {
             if (isLoadingPage || !hasMorePages) return
             isLoadingPage = true
+            loader.style.display = 'block'
             try {
               const nextUrls = await getUrls(subfolder, undefined, pageOffset)
               const keys = Object.keys(nextUrls || {})
               if (!keys.length) {
                 hasMorePages = false
                 observer.disconnect()
+                loader.style.display = 'none'
+                endMsg.style.display = 'block'
                 return
               }
               getImgsFromUrls(nextUrls, imgGrid)
               if (pageSizeCache != null) pageOffset += pageSizeCache
+              // Ensure footer elements order and sentinel stay last
+              imgGrid.appendChild(loader)
+              imgGrid.appendChild(endMsg)
+              imgGrid.appendChild(sentinel)
             } catch (e) {
               console.error('Failed to load next page:', e)
               hasMorePages = false
               observer.disconnect()
+              loader.style.display = 'none'
+              endMsg.style.display = 'block'
             } finally {
               isLoadingPage = false
+              loader.style.display = hasMorePages ? 'none' : loader.style.display
             }
           }