fix: correctly auto-expand first 5 backups when opening plan/repo

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

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 || "" },
           ]);