Added animation with loading page.

app/Downloader/downloader.js

@@ -126,7 +126,6 @@ let downloadButton = new Vue({
                     let epNumber = parseInt(name.split(' ').reverse()[1])
 
                     if (epNumber >= fromEp.ep && epNumber <= untilEp.ep) {
-                        console.log(name + "\n" + url)
                         downloadFile(url, path.join(__dirname, '..', '..', 'resources', 'tmp', `${name}.torrent`))
                     }
                 }

app/style.css

@@ -33,7 +33,7 @@ body
     background-size: 100%;
 }
 
-.page-content
+#releases
 {
     background-image: url('../resources/indexBack.jpg');
     background-size: cover;
@@ -110,4 +110,27 @@ body
 {
     float: right;
     font-size: x-small;
+}
+
+/* --------------- LOADER ---------------- */
+#loader-container
+{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+#loader-container h3
+{
+    margin-top: 12%;
+    font-family: "YuMincho +36p Kana", sans-serif;
+}
+
+.loader-gif
+{
+    position: absolute;
+    bottom: 0;
+    /*content: url('../resources/totoro-hoola-hoop.gif');*/
+    margin-left: 20%;
+    margin-right: 20%;
 }

index.html

@@ -49,7 +49,7 @@
     </div>
     <main class="mdl-layout__content">
         <div class="page-content">
-          <div id="releases" class="mdl-grid" >
+          <div id="releases" class="mdl-grid" v-if="show">
             <template v-for="release in releases">
               <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
                 <div class="elem">
@@ -77,6 +77,12 @@
               </div>
             </template>
           </div>
+          <div id="loader-container" v-if="show">
+            <div class="loading-text">
+              <h3>少々お待ち下さい。</h3>
+            </div>
+            <div class="loader-gif" v-bind:style="{ content: 'url(' + gif + ')' }"></div>
+          </div>
         </div>
     </main>
   </div>`

main.js

@@ -19,7 +19,6 @@ function createWindow () {
     titleBarStyle: 'hidden',
     show: false,
     title: 'KawAnime',
-    vibrancy: 'dark',
   })
 
   // and load the index.html of the app.

renderer.js

@@ -66,12 +66,18 @@ Nyaa.get_latest( function (err, animes) {
             })
         }
     }
+    setTimeout( () => {
+        loader.show = false
+        releases.show = true
+    }, 3000)
+
 })
 
 let releases = new Vue({
     el: '#releases',
     data: {
-        releases: []
+        releases: [],
+        show: false
     },
     watch: {
         releases: function () {  // Whenever releases changes, this function will run
@@ -85,6 +91,20 @@ let releases = new Vue({
     }
 })
 
+let loader = new Vue({
+    el: '#loader-container',
+    data: {
+        show: true,
+        gif: path.join(__dirname, 'resources', 'totoro-hoola-hoop.gif')
+    },
+    methods: {
+        test: function () {
+            this.show = false
+            releases.show = true
+        }
+    }
+})
+
 // Vue object to open the other pages
 new Vue({
     el: '.mdl-navigation',
@@ -110,22 +130,16 @@ function downloadFile (file_url, name){
     let req = request({
         method: 'GET',
         uri: file_url
-    });
+    })
 
-    let out = fs.createWriteStream(path.join(__dirname, 'resources', 'tmp', `${name}.torrent`));
-    req.pipe(out);
+    let out = fs.createWriteStream(path.join(__dirname, 'resources', 'tmp', `${name}.torrent`))
+    req.pipe(out)
 }
 
 function startTorrent (file_url, name) {
     const torrents = path.join(__dirname, 'resources', 'tmp', `*.torrent`)
     let openCmd
 
-    // Remove all torrent files in tmp directory
-    // fs.unlink(path.join(__dirname, 'resources', 'tmp', '*.torrent'), () => {
-    //     console.log('No more torrent files in tmp directory.')
-    //     downloadFile(file_url, name)
-    // })
-
     findRemoveSync(path.join(__dirname, 'resources', 'tmp'), {extensions: ['.torrent']})
 
     downloadFile(file_url, name)
@@ -145,10 +159,10 @@ function startTorrent (file_url, name) {
     exec(openCmd + torrents, (error, stdout, stderr) => {
         if (error)
         {
-            console.error(`exec error: ${error}`);
-            return;
+            console.error(`exec error: ${error}`)
+            return
         }
-        console.log(`stdout: ${stdout}`);
-        console.log(`stderr: ${stderr}`);
+        console.log(`stdout: ${stdout}`)
+        console.log(`stderr: ${stderr}`)
     })
 }