diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 715acd266..7beb113a4 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -3,7 +3,7 @@
     <div class="loading-modal">
       <section class="loading-modal-body">
         <div class="modal-icon-container text-center">
-            <img alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
+          <object type="image/svg+xml" :data="fmgAnimatedTransition"/>
         </div>
        </section>
     </div>
@@ -11,11 +11,15 @@
 </template>
 
 <script>
+// load the path like this - <object> data attribute doesn't load the relative path correctly
+const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg");
+
   export default {
     name: 'Modal',
     data() {
       return {
         isModalVisible: false,
+        fmgAnimatedTransition: FMGAnimatedTransition,
       };
     },
     methods: {