From ddce966bb60c61f0d97ab8ae30abce39b34767fa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 1 Jun 2022 10:03:04 -0400
Subject: [PATCH 1/2] Update animated text to flow in reverse direction.

---
 .../loading-modal/loading-modal.vue           | 50 +++++++++----------
 src/router/index.js                           |  6 +++
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index a3cbfa280..4b55abe3a 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-if="isModalVisible" class="container-fluid modal-loader">
+  <div class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid overflow-hidden">
         <div class="row h-100">
-          <div class="col text-center tagbg mb-2">
+          <div class="col text-center tagbg mb-4">
             <div class="spinner-border text-danger" role="status">
               <span class="visually-hidden">Loading...</span>
             </div>
@@ -12,17 +12,7 @@
         <div class="row">
           <div class="col">
             <div class="text-container slide">
-              <p>Finishing up
-                <span class="dot-1">.</span>
-                <span class="dot-2">.</span>
-                <span class="dot-3">.</span>
-              </p>
-              <p>Nearly there
-                <span class="dot-1">.</span>
-                <span class="dot-2">.</span>
-                <span class="dot-3">.</span>
-              </p>
-              <p>Generating your quote
+              <p>Assessing your damage
                 <span class="dot-1">.</span>
                 <span class="dot-2">.</span>
                 <span class="dot-3">.</span>
@@ -32,7 +22,17 @@
                 <span class="dot-2">.</span>
                 <span class="dot-3">.</span>
               </p>
-              <p>Assessing your damage
+              <p>Generating your quote
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Nearly there
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Finishing up
                 <span class="dot-1">.</span>
                 <span class="dot-2">.</span>
                 <span class="dot-3">.</span>
@@ -130,39 +130,39 @@ export default {
 
     p {
       margin: 0 175px;
-      transform: translateX(-2346px);
+      transform: translateX(180px);
     }
 
     @keyframes slide-in {
       0% {
-        transform: translateX(-2346px)
+        transform: translateX(180px)
       }
       11% {
-        transform: translateX(-2010px)
+        transform: translateX(-80px)
       }
       22% {
-        transform: translateX(-2010px)
+        transform: translateX(-80px)
       }
       33% {
-        transform: translateX(-1490px)
+        transform: translateX(-600px)
       }
       44% {
-        transform: translateX(-1490px)
+        transform: translateX(-600px)
       }
       55% {
-        transform: translateX(-985px)
+        transform: translateX(-1110px)
       }
       66% {
-        transform: translateX(-985px)
+        transform: translateX(-1110px)
       }
       77% {
-        transform: translateX(-490px)
+        transform: translateX(-1600px)
       }
       88% {
-        transform: translateX(-490px)
+        transform: translateX(-1600px)
       }
       100% {
-        transform: translateX(-40px)
+        transform: translateX(-2050px)
       }
     }
 
diff --git a/src/router/index.js b/src/router/index.js
index db46a3306..c8d614d48 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,6 +21,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
+import Modal from "@/common-components/loading-modal/loading-modal.vue";
 
 
 const routes = [
@@ -34,6 +35,11 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
+  {
+    path: "/loading-modal", // This is a temporary route for testing.
+    name: "Modal",
+    component: Modal,
+  },
   {
     path: "/",
     name: "root",

From c45a7048cb36ba358dca4be3b9169612e19acde9 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 1 Jun 2022 10:05:53 -0400
Subject: [PATCH 2/2] Remove temp test code. Re-add v-if.

---
 src/common-components/loading-modal/loading-modal.vue | 2 +-
 src/router/index.js                                   | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
index 4b55abe3a..d06392755 100644
--- a/src/common-components/loading-modal/loading-modal.vue
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid modal-loader">
+  <div v-if="isModalVisible" class="container-fluid modal-loader">
     <div class="row g-2 h-100 d-flex align-items-center">
       <div class="container-fluid overflow-hidden">
         <div class="row h-100">
diff --git a/src/router/index.js b/src/router/index.js
index c8d614d48..db46a3306 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,7 +21,6 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
-import Modal from "@/common-components/loading-modal/loading-modal.vue";
 
 
 const routes = [
@@ -35,11 +34,6 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
-  {
-    path: "/loading-modal", // This is a temporary route for testing.
-    name: "Modal",
-    component: Modal,
-  },
   {
     path: "/",
     name: "root",