From 5684c03a56e01f382ee1d9efac77075cef9b3aad Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Tue, 11 Sep 2018 19:17:43 +0200
Subject: [PATCH] Show loader in pre-rendered version

---
 src/App.vue       |  8 +++++++-
 src/vue/Input.vue | 42 ++++++++++++++++++++++++++++++++++++++----
 webpack.config.js |  6 +++++-
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 61e7eaa..b465866 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="app" class="remodal-bg">
+    <div id="app" class="remodal-bg render">
         <div class="container" id="content">
             <!--Headline-->
             <headline></headline>
@@ -323,6 +323,12 @@
             background: $disabled
             cursor: auto
 
+    /*-- Pre-render-specific --
+
+    #app.render .hide-render
+        display: none
+    #app.prerender .hide-prerender
+        display: none
 
     /*-- Responsive design --
 
diff --git a/src/vue/Input.vue b/src/vue/Input.vue
index 4d892f7..8eca7a3 100644
--- a/src/vue/Input.vue
+++ b/src/vue/Input.vue
@@ -3,10 +3,15 @@
         <form :class="{error: inputError}" @submit.prevent="startGen">
             <div class="error-text">Numbers and letters from A to F only</div>
             <input type="text" class="text-input-large" placeholder="Prefix" v-model="prefix" :disabled="running">
-            <div class="example">
+            <div class="row justify-content-center hide-render">
+                <div class="spinner">
+                    <div></div><div></div><div></div><div></div>
+                </div>
+            </div>
+            <div class="example hide-prerender">
                 E.g.&nbsp;<span v-text="example" class="monospace"></span>
             </div>
-            <div class="check">
+            <div class="check hide-prerender">
                 <label class="checkbox">
                     <input type="checkbox" name="checkbox" checked="" v-model="checksum"
                            :disabled="running">
@@ -14,7 +19,7 @@
                     Case-sensitive
                 </label>
             </div>
-            <div class="threads">
+            <div class="threads hide-prerender">
                 <input type="button" class="square-btn button-large" value="-" @click="threads--"
                        :disabled="running || threads <= 1">
                 <input type="button" class="square-btn arrow button-large" value="+" @click="threads++"
@@ -25,7 +30,8 @@
             </div>
             <div class="row">
                 <div class="col-lg-6 col-sm-12">
-                    <input type="button" value="Generate" class="button-large" @click="startGen"
+                    <input type="button" value="Generate" class="button-large hide-render" disabled>
+                    <input type="button" value="Generate" class="button-large hide-prerender" @click="startGen"
                            :disabled="running || inputError || error">
                 </div>
                 <div class="col-lg-6 col-sm-12">
@@ -181,4 +187,32 @@
             padding: 0
             line-height: 1em
 
+    .justify-content-center
+        justify-content: center
+
+    .spinner
+        width: 64px
+        height: 64px
+        margin: 18px
+        & > div
+            position: absolute
+            width: 51px
+            height: 51px
+            margin: 6px
+            border: 6px solid $primary
+            border-radius: 50%
+            animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
+            border-color: $primary transparent transparent transparent
+            &:nth-child(1)
+                animation-delay: -0.45s
+            &:nth-child(2)
+                animation-delay: -0.3s
+            &:nth-child(3)
+                animation-delay: -0.15s
+
+    @keyframes lds-ring
+        0%
+            transform: rotate(0deg)
+        100%
+            transform: rotate(360deg)
 </style>
diff --git a/webpack.config.js b/webpack.config.js
index c3ef499..cc47ca8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -90,7 +90,11 @@ if (process.env.NODE_ENV === 'production') {
 				collapseBooleanAttributes: true,
 				decodeEntities: true,
 				sortAttributes: true
-			}
+			},
+            postProcess (renderedRoute) {
+                renderedRoute.html = renderedRoute.html.replace('render', 'prerender');
+                return renderedRoute
+            },
 		})
 	]);
 }