From e80cf65d217b803fd59b6955e9e12d87f62f2773 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Mon, 7 Nov 2016 21:58:56 +0100
Subject: [PATCH] Faster Loading component

- Finished examples/custom-routes/
---
 examples/custom-routes/pages/_user.vue |  9 ++++++-
 examples/custom-routes/pages/index.vue | 35 ++++++++++++++++++++------
 lib/app/components/Loading.vue         |  6 ++---
 package.json                           |  2 +-
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/examples/custom-routes/pages/_user.vue b/examples/custom-routes/pages/_user.vue
index da06c87ac..4375b79bb 100644
--- a/examples/custom-routes/pages/_user.vue
+++ b/examples/custom-routes/pages/_user.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="user">
     <h3>{{ name }}</h3>
+    <h4>@{{ username }}</h4>
     <p>Email : {{ email }}</p>
+    <p><router-link to="/">List of users</router-link></p>
   </div>
 </template>
 
@@ -16,5 +18,10 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.user {
+  text-align: center;
+  margin-top: 100px;
+  font-family: sans-serif;
+}
 </style>
diff --git a/examples/custom-routes/pages/index.vue b/examples/custom-routes/pages/index.vue
index 2bfc05db9..c3150ec05 100644
--- a/examples/custom-routes/pages/index.vue
+++ b/examples/custom-routes/pages/index.vue
@@ -1,10 +1,12 @@
 <template>
-  <ul class="users">
+  <div class="container">
     <h2>Users</h2>
-    <li v-for="user in users">
-      <router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
-    </li>
-  </ul>
+    <ul class="users">
+      <li v-for="user in users">
+        <router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,25 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+.container {
+  text-align: center;
+  margin-top: 100px;
+  font-family: sans-serif;
+}
+.users {
+  list-style-type: none;
+}
+.users li a {
+  display: inline-block;
+  width: 200px;
+  border: 1px #ddd solid;
+  padding: 10px;
+  text-align: left;
+  color: #222;
+  text-decoration: none;
+}
+.users li a:hover {
+  color: orange;
+}
 </style>
diff --git a/lib/app/components/Loading.vue b/lib/app/components/Loading.vue
index d0a915fcc..3aec545ab 100644
--- a/lib/app/components/Loading.vue
+++ b/lib/app/components/Loading.vue
@@ -73,9 +73,9 @@ export default {
         Vue.nextTick(() => {
           setTimeout(() => {
             this.percent = 0
-          }, 100)
+          }, 200)
         })
-      }, 800)
+      }, 500)
       return this
     },
     fail () {
@@ -96,7 +96,7 @@ export default {
   right: 0px;
   height: 2px;
   width: 0%;
-  transition: width 0.2s, opacity 0.6s;
+  transition: width 0.2s, opacity 0.4s;
   opacity: 1;
   background-color: #efc14e;
   z-index: 999999;
diff --git a/package.json b/package.json
index 2f77ee585..e57fd7341 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",