Fix error with user's having no subscriptions

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "FreeTube",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "FreeTube",
   "productName": "FreeTube",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "An Open Source YouTube app for privacy.",
   "main": "src/js/init.js",
   "scripts": {

src/index.html

@@ -59,6 +59,14 @@
     </div>
   </div>
   <div id="main">
+    <div id='noSubscriptions' v-if='seen'>
+      <h2 class="message">
+        Your Subscription list is currently empty.  Start adding subscriptions
+        to see them here.
+        <br /><br />
+        <i class="far fa-frown" style="font-size: 200px"></i>
+      </h2>
+    </div>
     <div id='channelView'></div>
     <div id='mainHeaderView'></div>
     <div id='channelVideosView'></div>

src/js/subscriptions.js

@@ -171,11 +171,9 @@ function loadSubscriptions() {
 
     } else {
       // User has no subscriptions. Display message.
-      const container = document.getElementById('main');
-      progressView.seen = false;
-
-      container.innerHTML = `<h2 class="message">Your Subscription list is currently empty.  Start adding subscriptions
-                             to see them here.<br /><br /><i class="far fa-frown" style="font-size: 200px"></i></h2>`;
+      loadingView.seen = false;
+      headerView.seen = false;
+      noSubscriptions.seen = true;
     }
   });
 }

src/js/templates.js

@@ -50,6 +50,13 @@ let loadingView = new Vue({
   }
 });
 
+let noSubscriptions = new Vue({
+  el: '#noSubscriptions',
+  data: {
+    seen: false
+  }
+});
+
 let sideNavBar = new Vue({
   el: '#sideNav',
   methods: {
@@ -406,6 +413,7 @@ let playerView = new Vue({
 
 function hideViews(){
   subscriptionView.seen = false;
+  noSubscriptions.seen = false;
   aboutView.seen = false;
   headerView.seen = false;
   searchView.seen = false;