Merge pull request #497 from dod-ccpo/v-cloak

Prevent Vue from Loading Variables Before Evaluation

templates/audit_log/audit_log.html

@@ -3,23 +3,23 @@
 
 {% block content %}
 
+  <div v-cloak>
+    <section class="block-list">
+      <header class="block-list__header">
+        <h1 class="block-list__title">Activity History</h1>
+      </header>
 
-  <section class="block-list">
-    <header class="block-list__header">
-      <h1 class="block-list__title">Activity History</h1>
-    </header>
+      <ul>
+        {% for event in audit_events %}
+          <li class="block-list__item">
+            {% autoescape false %}
+              {{ event | renderAuditEvent }}
+            {% endautoescape %}
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
 
-    <ul>
-      {% for event in audit_events %}
-        <li class="block-list__item">
-          {% autoescape false %}
-            {{ event | renderAuditEvent }}
-          {% endautoescape %}
-        </li>
-      {% endfor %}
-    </ul>
-
-  </section>
-
-  {{ Pagination(audit_events, 'atst.activity_history') }}
+    {{ Pagination(audit_events, 'atst.activity_history') }}
+  </div>
 {% endblock %}

templates/requests/index.html

@@ -75,7 +75,7 @@
     </div>
   {% endif %}
 
-  <div class="col col--grow">
+  <div v-cloak class="col col--grow">
 
     {% if extended_view %}
       <form @submit.prevent class='search-bar'>
@@ -109,7 +109,7 @@
       </form>
     {% endif %}
 
-    <div class='responsive-table-wrapper'>
+    <div v-cloak class='responsive-table-wrapper'>
       <table v-if="filteredRequests.length">
         <thead>
           <tr>

templates/workspaces/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class='col'>
+<div v-cloak class='col'>
   <table>
     <thead>
       <tr>

templates/workspaces/projects/index.html

@@ -21,7 +21,7 @@
 {% else %}
 
   {% for project in workspace.projects %}
-    <div class='block-list project-list-item'>
+    <div v-cloak class='block-list project-list-item'>
       <header class='block-list__header'>
         <h2 class='block-list__title'>{{ project.name }} ({{ project.environments|length }} environments)</h2>
         {% if user_can(permissions.RENAME_APPLICATION_IN_WORKSPACE) %}

templates/workspaces/reports/index.html

@@ -13,7 +13,7 @@
       {"label": "Learn More", "href": url_for('atst.helpdocs'), "icon": "info"}
     ]  ) }}
 
-  <div class='funding-summary-row'>
+  <div v-cloak class='funding-summary-row'>
 
     <div class='funding-summary-row__col'>
       <div class='panel spend-summary'>
@@ -131,6 +131,7 @@
   {% else %}
 
     <budget-chart
+      v-cloak
       budget={{ budget }}
       current-month='{{ current_month_index }}'
       expiration-date='{{ expiration_date }}'