diff --git a/index.html b/index.html
index f033dd8..eb3a0f4 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,14 @@
         padding: 5px;
       }
 
+      .progress-info {
+        width: 50%;
+        height: 100px;
+        padding: 5px;
+        margin: 50px auto;
+        text-align: center;
+      }
+
       .lds-dual-ring {
         display: inline-block;
         position: relative;
@@ -57,9 +65,10 @@
     
     
     <div id="app">
-      <div class="loading-page">
+      <div class="loading-page" id="loading-api-spinner">
         <img src="/src/assets/logo2x-1.png" style="width: 304px; margin-top: 50px;">
         <div class="lds-dual-ring"></div>
+        <div class="progress-info" id="loading-api-info"></div>
       </div>
     </div>
     
diff --git a/src/obp/message-docs.ts b/src/obp/message-docs.ts
index 06a6bab..7724b6c 100644
--- a/src/obp/message-docs.ts
+++ b/src/obp/message-docs.ts
@@ -24,6 +24,20 @@ export async function cacheDoc(messageDocsCache: any): Promise<any> {
   const messageDocs = await connectors.reduce(async (agroup: any, connector: any) => {
     const group = await agroup
     const docs = await getOBPMessageDocs(connector)
+    const logMessage = `Loading message docs { connector: ${ connector } }`
+    console.log(logMessage)
+    // 1. Select the div element using the id property
+    const spinner = document.getElementById("loading-api-spinner");
+    // 2. Select the div element using the id property
+    let p = document.getElementById("loading-api-info");
+    // 3. Add the text content
+    if(p !== null) {
+      p.textContent = logMessage;
+    } else {
+      p = document.createElement("p")
+    }
+    // 4. Append the p element to the div element
+    spinner?.appendChild(p);
     if (!Object.keys(docs).includes('code')) {
       group[connector] = getGroupedMessageDocs(docs)
     }
diff --git a/src/obp/resource-docs.ts b/src/obp/resource-docs.ts
index 69bb916..b6f7d6a 100644
--- a/src/obp/resource-docs.ts
+++ b/src/obp/resource-docs.ts
@@ -26,12 +26,26 @@ export async function cacheDoc(resourceDocsCache: any): Promise<any> {
     const scannedAPIVersions = apiVersions.scanned_api_versions
     const resourceDocsMapping: any = {}
     for (const { apiStandard, API_VERSION } of scannedAPIVersions) {
+      const logMessage = `Loading API { standard: ${ apiStandard }, version: ${ API_VERSION } }`
+      console.log(logMessage)
       if (apiStandard) {
         const version = `${apiStandard.toUpperCase()}${API_VERSION}`
         const resourceDocs = await getOBPResourceDocs(version)
         if (version && Object.keys(resourceDocs).includes('resource_docs'))
           resourceDocsMapping[version] = resourceDocs
       }
+      // 1. Select the div element using the id property
+      const spinner = document.getElementById("loading-api-spinner");
+      // 2. Select the div element using the id property
+      let p = document.getElementById("loading-api-info");
+      // 3. Add the text content
+      if(p !== null) {
+        p.textContent = logMessage;
+      } else {
+        p = document.createElement("p")
+      }
+      // 4. Append the p element to the div element
+      spinner?.appendChild(p);
     }
     await resourceDocsCache.put('/', new Response(JSON.stringify(resourceDocsMapping)))
     return resourceDocsMapping