improve(frontend): Changes tab status message logic (#8454)

frontend/src/hooks/query/use-get-git-changes.ts

@@ -63,6 +63,7 @@ export const useGetGitChanges = () => {
 
   return {
     data: orderedChanges,
+    isLoading: result.isLoading,
     isSuccess: result.isSuccess,
     isError: result.isError,
     error: result.error,

frontend/src/i18n/translation.json

@@ -7589,20 +7589,20 @@
         "uk": "Дію не виконано. Можливо, це сталося через натискання користувачем кнопки зупинки або через збій та перезапуск системи виконання через обмеження ресурсів. Можливо, було втрачено будь-який раніше встановлений стан системи, залежності або змінні середовища."
     },
     "DIFF_VIEWER$LOADING": {
-        "en": "Loading...",
-        "ja": "読み込み中...",
-        "zh-CN": "加载中...",
-        "zh-TW": "加載中...",
-        "ko-KR": "로딩 중...",
-        "no": "Laster inn...",
-        "it": "Caricamento in corso...",
-        "pt": "Carregando...",
-        "es": "Cargando...",
-        "ar": "جار التحميل...",
-        "fr": "Chargement...",
-        "tr": "Yükleniyor...",
-        "de": "Wird geladen...",
-        "uk": "Завантаження..."
+        "en": "Loading changes...",
+        "ja": "変更を読み込んでいます...",
+        "zh-CN": "正在加载更改...",
+        "zh-TW": "正在加載更改...",
+        "ko-KR": "변경 사항을 로드하는 중...",
+        "no": "Laster inn endringer...",
+        "it": "Caricamento modifiche...",
+        "pt": "Carregando alterações...",
+        "es": "Cargando cambios...",
+        "ar": "جارٍ تحميل التغييرات...",
+        "fr": "Chargement des modifications...",
+        "tr": "Değişiklikler yükleniyor...",
+        "de": "Änderungen werden geladen...",
+        "uk": "Завантаження змін..."
     },
     "DIFF_VIEWER$GETTING_LATEST_CHANGES": {
         "en": "Getting latest changes...",

frontend/src/routes/changes-tab.tsx

@@ -14,7 +14,7 @@ const GIT_REPO_ERROR_PATTERN = /not a git repository/i;
 
 function StatusMessage({ children }: React.PropsWithChildren) {
   return (
-    <div className="w-full h-full flex items-center text-center justify-center text-2xl text-tertiary-light">
+    <div className="w-full h-full flex flex-col items-center text-center justify-center text-2xl text-tertiary-light">
       {children}
     </div>
   );
@@ -22,7 +22,17 @@ function StatusMessage({ children }: React.PropsWithChildren) {
 
 function GitChanges() {
   const { t } = useTranslation();
-  const { data: gitChanges, isSuccess, isError, error } = useGetGitChanges();
+  const {
+    data: gitChanges,
+    isSuccess,
+    isError,
+    error,
+    isLoading: loadingGitChanges,
+  } = useGetGitChanges();
+
+  const [statusMessage, setStatusMessage] = React.useState<string[] | null>(
+    null,
+  );
 
   const { curAgentState } = useSelector((state: RootState) => state.agent);
   const runtimeIsActive = !RUNTIME_INACTIVE_STATES.includes(curAgentState);
@@ -30,29 +40,44 @@ function GitChanges() {
   const isNotGitRepoError =
     error && GIT_REPO_ERROR_PATTERN.test(retrieveAxiosErrorMessage(error));
 
-  let statusMessage: React.ReactNode = null;
-  if (!runtimeIsActive) {
-    statusMessage = <span>{t(I18nKey.DIFF_VIEWER$WAITING_FOR_RUNTIME)}</span>;
-  } else if (isNotGitRepoError) {
-    if (error) {
-      statusMessage = <span>{retrieveAxiosErrorMessage(error)}</span>;
+  React.useEffect(() => {
+    if (!runtimeIsActive) {
+      setStatusMessage([I18nKey.DIFF_VIEWER$WAITING_FOR_RUNTIME]);
+    } else if (error) {
+      const errorMessage = retrieveAxiosErrorMessage(error);
+      if (GIT_REPO_ERROR_PATTERN.test(errorMessage)) {
+        setStatusMessage([
+          I18nKey.DIFF_VIEWER$NOT_A_GIT_REPO,
+          I18nKey.DIFF_VIEWER$ASK_OH,
+        ]);
+      } else {
+        setStatusMessage([errorMessage]);
+      }
+    } else if (loadingGitChanges) {
+      setStatusMessage([I18nKey.DIFF_VIEWER$LOADING]);
     } else {
-      statusMessage = (
-        <span>
-          {t(I18nKey.DIFF_VIEWER$NOT_A_GIT_REPO)}
-          <br />
-          {t(I18nKey.DIFF_VIEWER$ASK_OH)}
-        </span>
-      );
+      setStatusMessage(null);
     }
-  }
+  }, [
+    runtimeIsActive,
+    isNotGitRepoError,
+    loadingGitChanges,
+    error,
+    setStatusMessage,
+  ]);
 
   return (
     <main className="h-full overflow-y-scroll px-4 py-3 gap-3 flex flex-col items-center">
       {!isSuccess || !gitChanges.length ? (
         <div className="relative flex h-full w-full items-center">
           <div className="absolute inset-x-0 top-1/2 -translate-y-1/2">
-            {statusMessage && <StatusMessage>{statusMessage}</StatusMessage>}
+            {statusMessage && (
+              <StatusMessage>
+                {statusMessage.map((msg) => (
+                  <span key={msg}>{t(msg)}</span>
+                ))}
+              </StatusMessage>
+            )}
           </div>
 
           <div className="absolute inset-x-0 bottom-0">