@@ -3,8 +3,10 @@
 namespace ProcessMaker\Http\Controllers;
 
 use Exception;
+use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
+use ProcessMaker\Facades\MessageBrokerService;
 use ProcessMaker\Models\Setting;
 
 class AboutController extends Controller
@@ -70,7 +72,13 @@ public function index()
             $microServices = [$aiMicroService];
         }
 
-        return view('about.index',
+        $nayraMicroService = $this->getNayraMicroServiceAbout();
+        if ($nayraMicroService) {
+            $microServices[] = $nayraMicroService;
+        }
+
+        $view = request()->get('partial') === 'ms' ? 'about.microservices' : 'about.index';
+        return view($view,
             compact(
                 'packages',
                 'indexedSearch',
@@ -93,4 +101,27 @@ private function getAiMicroService()
 
         return null;
     }
+
+    /**
+     * Get the Nayra microservice about information from cache or send about message to receive it.
+     *
+     * @return array|null
+     */
+    private function getNayraMicroServiceAbout(): ?array
+    {
+        if (config('app.message_broker_driver') !== 'default') {
+            $about = Cache::get('nayra.about', null);
+            if (!$about) {
+                // Send about message to receive about information from nayra service
+                MessageBrokerService::sendAboutMessage();
+                $about = [
+                    'name' => 'processmaker/nayra-service',
+                    'waiting' => true,
+                ];
+            }
+            return $about;
+        }
+
+        return null;
+    }
 }
@@ -45,22 +45,9 @@
         </ul>
         @endif
         @if ($microServices)
-          <h5>{{ __('Microservices') }}</h5>
-          <ul class="list-group-flush p-0">
-            @foreach ($microServices as $microService)
-              <li class="list-group-item">
-                  <h6><i class="fas fa-puzzle-piece mr-2"></i>{{ ucfirst(trans($microService['name'])) }}</h6>
-                  <small>
-                    @if (isset($microService['description']))
-                      <div>{{ $microService['description'] }}</div>
-                    @endif
-                    @if (isset($microService['version']))
-                      <div><strong>Version:</strong> {{ $microService['version'] }}</div>
-                    @endif
-                  </small>
-              </li>
-            @endforeach
-          </ul>
+        <div id="ms-section">
+          @include('about.microservices')
+        </div>
         @endif
         <div><strong>{{ __('Indexed Search') }}</strong>: {{ $indexedSearch ? __('Enabled') : __('Disabled') }}</div>
         <hr>
@@ -76,12 +63,27 @@
     </div>
   </div>
 </div>
+<script>
+async function refreshMs() {
+  const update = await (await fetch('?partial=ms')).text();
+  document.getElementById('ms-section').innerHTML = update;
+  const hasWaiting = update.indexOf('waiting') > -1;
+  if (hasWaiting) {
+    setTimeout(refreshMs, 1000);
+  }
+}
+setTimeout(refreshMs, 1000);
+</script>
 @endsection
 
 @section('css')
 <style>
 .about-logo {
   max-width: 300px;
 }
+.waiting {
+  width: 1rem;
+  height: 1rem;
+}
 </style>
 @endsection
@@ -0,0 +1,19 @@
+<h5>{{ __('Microservices') }}</h5>
+<ul class="list-group-flush p-0">
+@foreach ($microServices as $microService)
+    <li class="list-group-item">
+        <h6><i class="fas fa-puzzle-piece mr-2"></i>{{ ucfirst(trans($microService['name'])) }}</h6>
+        <small>
+        @if (isset($microService['description']))
+            <div>{{ $microService['description'] }}</div>
+        @endif
+        @if (isset($microService['version']))
+            <div><strong>Version:</strong> {{ $microService['version'] }}</div>
+        @endif
+        </small>
+        @if (!empty($microService['waiting']))
+        <i class="fas fa-sync fa-spin text-secondary waiting"></i>
+        @endif
+    </li>
+@endforeach
+</ul>