diff --git a/app/src/config/repos.ts b/app/src/config/repos.ts
index 5ab273c8d..e15bed6fd 100644
--- a/app/src/config/repos.ts
+++ b/app/src/config/repos.ts
@@ -42,8 +42,10 @@ const getCloudList = (reload = false) => {
 
 const renderCloudBackup = () => {
     fetchPost("/api/cloud/getCloudSpace", {}, (response) => {
+        repos.element.querySelector("#reposLoading").classList.add("fn__none");
         if (response.code === 1) {
             repos.element.querySelector("#reposData").innerHTML = response.msg;
+            return;
         } else {
             repos.element.querySelector("#reposData").innerHTML = `<div class="fn__flex">
     <div class="fn__flex-1">
@@ -301,7 +303,9 @@ export const repos = {
     <div class="b3-label__text ft__error">${0 === window.siyuan.config.e2eePasswdMode ? window.siyuan.languages.builtinE2EEPasswdTip : window.siyuan.languages.changeE2EEPasswdTip}</div>
 </div>`;
         }
-        return `<div>
+        return `<div><div style="position: fixed;width: 800px;height: 434px;box-sizing: border-box;text-align: center;display: flex;align-items: center;justify-content: center;z-index: 1;" id="reposLoading">
+    <img src="/stage/loading-pure.svg">
+</div>
 <div id="reposData" class="b3-label">
     <div class="fn__flex">
         <div class="fn__flex-1">
@@ -358,6 +362,9 @@ ${passwordHTML}
                 }
             });
         });
+        const loadingElement = repos.element.querySelector("#reposLoading") as HTMLElement;
+        loadingElement.style.width = repos.element.clientWidth + "px";
+        loadingElement.style.height = repos.element.clientHeight + "px";
         repos.element.firstElementChild.addEventListener("click", (event) => {
             let target = event.target as HTMLElement;
             const syncConfigElement = repos.element.querySelector("#reposCloudSyncList");