From 5170d40bb2ad6addacddc411091c2e5c5a9daa34 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 26 Aug 2018 14:03:43 -0700
Subject: [PATCH] Cleaner animation

---
 .../components/server/subpages/Databases.vue  | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/resources/assets/scripts/components/server/subpages/Databases.vue b/resources/assets/scripts/components/server/subpages/Databases.vue
index 8a39a656f..c1ecef665 100644
--- a/resources/assets/scripts/components/server/subpages/Databases.vue
+++ b/resources/assets/scripts/components/server/subpages/Databases.vue
@@ -3,27 +3,29 @@
         <div v-if="loading">
             <div class="spinner spinner-xl blue"></div>
         </div>
-        <div class="context-box" v-else-if="!databases.length">
-            <div class="flex items-center">
-                <database-icon class="flex-none text-grey-darker"></database-icon>
-                <div class="flex-1 px-4 text-grey-darker">
-                    <p>You have no databases.</p>
+        <div class="animate fadein" v-else>
+            <div class="context-box" v-if="!databases.length">
+                <div class="flex items-center">
+                    <database-icon class="flex-none text-grey-darker"></database-icon>
+                    <div class="flex-1 px-4 text-grey-darker">
+                        <p>You have no databases.</p>
+                    </div>
                 </div>
             </div>
+            <div v-else>
+                <database-row v-for="database in databases" :database="database" :key="database.name"/>
+            </div>
+            <div>
+                <button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
+            </div>
+            <modal :show="showCreateModal" v-on:close="showCreateModal = false">
+                <create-database-modal
+                        v-on:close="showCreateModal = false"
+                        v-on:database="handleModalCallback"
+                        v-if="showCreateModal"
+                />
+            </modal>
         </div>
-        <div v-else>
-            <database-row v-for="database in databases" :database="database" :key="database.name"/>
-        </div>
-        <div>
-            <button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
-        </div>
-        <modal :show="showCreateModal" v-on:close="showCreateModal = false">
-            <create-database-modal
-                    v-on:close="showCreateModal = false"
-                    v-on:database="handleModalCallback"
-                    v-if="showCreateModal"
-            />
-        </modal>
     </div>
 </template>