From 7fa776a9192f2046a86c95d9f48a831518de9a9c Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Fri, 26 Dec 2025 14:44:10 +0700
Subject: [PATCH] add load more button on snapshot array

---
 frontend/src/pages/SettingsApplication.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/SettingsApplication.tsx b/frontend/src/pages/SettingsApplication.tsx
index 238f6610..5cfacf6a 100644
--- a/frontend/src/pages/SettingsApplication.tsx
+++ b/frontend/src/pages/SettingsApplication.tsx
@@ -33,6 +33,7 @@ const SettingsApplication = () => {
   const { userConfig } = useUserConfigStore();
   const [response, setResponse] = useState<SettingsApplicationReponses>();
   const [refresh, setRefresh] = useState(false);
+  const [visibleSnapshotCount, setVisibleSnapshotCount] = useState(10);
 
   const snapshots = response?.snapshots;
   const appSettingsConfig = response?.appSettingsConfig;
@@ -976,10 +977,9 @@ const SettingsApplication = () => {
                         </p>
                         <br />
                         {restoringSnapshot && <p>Snapshot restore started</p>}
-                        {!restoringSnapshot &&
-                          snapshots.snapshots &&
-                          snapshots.snapshots.map(snapshot => {
-                            return (
+                        {!restoringSnapshot && snapshots.snapshots && (
+                          <>
+                            {snapshots.snapshots?.slice(0, visibleSnapshotCount).map(snapshot => (
                               <p key={snapshot.id}>
                                 <Button
                                   label="Restore"
@@ -994,8 +994,17 @@ const SettingsApplication = () => {
                                 <span className="settings-current">{snapshot.duration_s}s</span> to
                                 create. State: <i>{snapshot.state}</i>
                               </p>
-                            );
-                          })}
+                            ))}
+                            {visibleSnapshotCount < snapshots.snapshots.length && (
+                              <Button
+                                label="Load More"
+                                onClick={() => {
+                                  setVisibleSnapshotCount(visibleSnapshotCount + 10);
+                                }}
+                              />
+                            )}
+                          </>
+                        )}
                       </>
                     )}
                   </div>