From 5d8f425c64a08a476c96624dc5faec4620ad6d0b Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Thu, 23 Nov 2023 16:40:09 -0600
Subject: [PATCH] Refactor in-flight map loading logic

---
 resources/views/requests/show.blade.php | 42 +++++++++++++++++++------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index f1bd34c3dc..7b492217b6 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -236,14 +236,26 @@ class="tab-pane card card-body border-top-0 p-3">
                   <h4>
                     {{ __(':name In-Flight Map', ['name' => $request->process->name]) }}
                   </h4>
-                  <div v-if="iframeLoading" class="d-flex justify-content-center">
+                  <div v-if="isObjectLoading" class="d-flex justify-content-center">
                     <div class="spinner-border text-primary" role="status"></div>
                   </div>
-                  <div v-show="!iframeLoading">
-                    <iframe class="card"
-                      src="{{ route('modeler.inflight', ['process' => $request->process->id, 'request' => $request->id]) }}"
-                      width="100%" height="640px" frameborder="0" style="border-radius: 4px;"
-                      @load="onLoadIframe"></iframe>
+                  <div :class="{ 'hidden': isObjectLoading }">
+                    <object ref="processMap" class="card"
+                      data="{{ route('modeler.inflight', [
+                        'process' => $request->process->id,
+                        'request' => $request->id
+                      ]) }}"
+                      width="100%"
+                      :height="isObjectLoading ? 'auto' : '640px'"
+                      frameborder="0"
+                      type="text/html"
+                      style="border-radius: 4px;"
+                      @load="onLoadedObject">
+                      <!-- Accessible Alternative Content -->
+                      <p>
+                        {{ __('Content not available. Check settings or try a different device.') }}
+                      </p>
+                    </object>
                   </div>
                 </div>
               </div>
@@ -419,7 +431,7 @@ class="d-inline-flex pull-left align-items-center" :input-data="requestBy" displ
           packages: [],
           processId: @json($request->process->id),
           canViewComments: @json($canViewComments),
-          iframeLoading: false,
+          isObjectLoading: false,
           showTree: false,
         };
       },
@@ -543,12 +555,12 @@ classStatusCard() {
         switchTab(tab) {
           this.activeTab = tab;
           if (tab === 'overview') {
-            this.iframeLoading = true;
+            this.isObjectLoading = true;
           }
           ProcessMaker.EventBus.$emit('tab-switched', tab);
         },
-        onLoadIframe() {
-          this.iframeLoading = false;
+        onLoadedObject() {
+          this.isObjectLoading = false;
         },
         requestStatusClass(status) {
           status = status.toLowerCase();
@@ -735,3 +747,13 @@ classStatusCard() {
     });
   </script>
 @endsection
+
+@section('css')
+<style>
+  .hidden {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>
+@endsection