diff --git a/assets/index.html b/assets/index.html
index b5e19db..88f6e1a 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -189,7 +189,10 @@
                 <button class="toolbar-item" id="content-appearance" v-b-tooltip.hover.bottom="'Appearance'">
                     <span class="icon">{% inline "sliders.svg" %}</span>
                 </button>
-                <button class="toolbar-item" @click="getReadable(itemSelectedDetails)" v-b-tooltip.hover.bottom="'Read Here'">
+                <button class="toolbar-item"
+                        :class="{loading: loading.readability, active: itemSelectedReadability}"
+                        @click="getReadable(itemSelectedDetails)"
+                        v-b-tooltip.hover.bottom="'Read Here'">
                     <span class="icon">{% inline "book-open.svg" %}</span>
                 </button>
                 <a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index ddbb0ca..e334f05 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -148,6 +148,7 @@ var vm = new Vue({
         'feeds': false,
         'newfeed': false,
         'items': false,
+        'readability': false,
       },
       'fonts': FONTS,
       'feedStats': {},
@@ -501,8 +502,14 @@ var vm = new Vue({
       })
     },
     getReadable: function(item) {
+      if (this.itemSelectedReadability) {
+        this.itemSelectedReadability = null
+        return
+      }
       if (item.link) {
+        this.loading.readability = true
         api.crawl(item.link).then(function(body) {
+          vm.loading.readability = false
           if (!body.length) return
           var bodyClean = sanitize(body, vm.feedsById[item.feed_id].link || item.link)
           var doc = new DOMParser().parseFromString(bodyClean, 'text/html')