diff --git a/src/web/src/components/Loading.vue b/src/web/src/components/Loading.vue
index 4f2934a..7c55364 100644
--- a/src/web/src/components/Loading.vue
+++ b/src/web/src/components/Loading.vue
@@ -9,11 +9,11 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;">
+    align-items: center;"
+  >
     <a-spin size="large" />
-    <div style="color: #bbbbbb;
-    font-size: 3rem;
-    margin-top: 45px;">{{ title }}</div>
+    <div style="color: #bbbbbb;font-size: 3rem;margin-top: 45px;">{{ title }}</div>
+    <div v-if="null != subTitle" style="color: #bbbbbb;font-size: 1rem;margin-top: 45px;">{{ subTitle }}</div>
   </div>
 </template>
 <script setup>
@@ -22,8 +22,10 @@ import { ref } from 'vue';
 const enable = ref(false);
 /** @var {String} */
 const title = ref('');
+/** @var {String} */
+const subTitle = ref(null);
 // expose methods
-defineExpose({show, hide});
+defineExpose({show, hide, updateSubTitle});
 
 // show
 function show( titleContent ) {
@@ -36,4 +38,8 @@ function hide() {
     enable.value = false;
 }
 
+// update sub title
+function updateSubTitle( subTitleContent ) {
+    subTitle.value = subTitleContent;
+}
 </script>
\ No newline at end of file