From 9fa8ebc1445a205ec8b02ad84c1103b4d1ecd5b8 Mon Sep 17 00:00:00 2001
From: Gareth George <garethgeorge97@gmail.com>
Date: Sat, 30 Mar 2024 09:45:22 +0000
Subject: [PATCH] fix: correctly auto-expand first 5 backups when opening
 plan/repo

---
 webui/src/components/OperationTree.tsx | 5 ++++-
 webui/src/views/App.tsx                | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/OperationTree.tsx b/webui/src/components/OperationTree.tsx
index ecfaf5f3..bce76b91 100644
--- a/webui/src/components/OperationTree.tsx
+++ b/webui/src/components/OperationTree.tsx
@@ -44,6 +44,7 @@ export const OperationTree = ({
 }: React.PropsWithoutRef<{ req: GetOperationsRequest }>) => {
   const alertApi = useAlertApi();
   const showModal = useShowModal();
+  const [loading, setLoading] = useState(true);
   const [backups, setBackups] = useState<BackupInfo[]>([]);
   const [selectedBackupId, setSelectedBackupId] = useState<string | null>(null);
 
@@ -80,6 +81,8 @@ export const OperationTree = ({
       })
       .catch((e) => {
         alertApi!.error("Failed to fetch operations: " + e.messag);
+      }).finally(() => {
+        setLoading(false);
       });
     return () => {
       unsubscribeFromOperations(lis);
@@ -93,7 +96,7 @@ export const OperationTree = ({
   if (backups.length === 0) {
     return (
       <Empty
-        description="No backups yet."
+        description={loading ? "Loading..." : "No backups yet."}
         image={Empty.PRESENTED_IMAGE_SIMPLE}
       ></Empty>
     );
diff --git a/webui/src/views/App.tsx b/webui/src/views/App.tsx
index fe371398..5aa555e0 100644
--- a/webui/src/views/App.tsx
+++ b/webui/src/views/App.tsx
@@ -192,7 +192,7 @@ const getSidenavItems = (config: Config | null): MenuProps["items"] => {
         onClick: async () => {
           const { PlanView } = await import("./PlanView");
 
-          setContent(<PlanView plan={plan} />, [
+          setContent(<PlanView key={plan.id} plan={plan} />, [
             { title: "Plans" },
             { title: plan.id || "" },
           ]);
@@ -234,7 +234,7 @@ const getSidenavItems = (config: Config | null): MenuProps["items"] => {
         onClick: async () => {
           const { RepoView } = await import("./RepoView");
 
-          setContent(<RepoView repo={repo} />, [
+          setContent(<RepoView key={repo.id} repo={repo} />, [
             { title: "Repos" },
             { title: repo.id || "" },
           ]);