Added loading message for Tour responses

README.md

@@ -1,56 +1,44 @@
 # LBRY.tech
-
+Technical documentation website for [the LBRY protocol](https://lbry.io).
-Technical documentation website for [the LBRY protocol](https://lbry.io) made with JavaScript.
-
 [![Build Status](https://travis-ci.org/lbryio/lbry.tech.svg?branch=master)](https://travis-ci.org/lbryio/lbry.tech)
 
-
-
 Notable tools used:
-
 * [choo](https://choo.io)
 * [Fastify](https://www.fastify.io)
 
-![Screenshot of LBRY.tech](https://spee.ch/fe0f379ffd13f90fb023dec19316f08b94f9d6bc/lbrytech-site-preview.png)
+![Screenshot of lbry.tech](https://spee.ch/fe0f379ffd13f90fb023dec19316f08b94f9d6bc/lbrytech-site-preview.png)
 
 
 
+## Notes
+- Requires our private `web-daemon` to be running locally, in development.
+
+## Prerequisites
+- [Node](https://nodejs.org) (version >= 10)
+
 ## Installation
-
+`npm i`.
-[Node](https://nodejs.org) (version >= 10) is required, so install that first. Then fork this repo, `cd` into it and run `npm i`.
-
-
 
 ## Development
-
 `npm run watch` and visit [localhost:8080](http://localhost:8080)
 
+## Testing
+`npm test`
 
+## Production
+`npm start`
 
 ## Usage
-
 Visit [LBRY.tech](https://lbry.tech) to see this repo in production.
 
-
-
 ## Contributing
-
 Contributions to this project are welcome, encouraged, and compensated. For more details, see [CONTRIBUTING.md](CONTRIBUTING.md).
 
-
-
 ## License
-
 This project is MIT licensed.
 
-
-
 ## Security
-
 We take security seriously. Please contact [security@lbry.io](mailto:security@lbry.io) regarding any security issues. [Our PGP key is here](https://keybase.io/lbry/key.asc) if you need it.
 
-
-
 ## Contact
-
 The primary contact for this project is [@netoperatorwibby](https://github.com/netoperatorwibby)(paul@lbry.io).

helpers/fetch-metadata.js

@@ -156,6 +156,7 @@ module.exports = exports = (data, socket) => {
             <h3>Response</h3>
             ${explorerNotice}
             <pre><code class="language-json">${renderedCode}</code></pre>
+            <script>$("#temp-loader").hide();</script>
           `),
           "message": "updated html",
           "selector": `#example${data.example}-result`

sass/init/_extends.scss

@@ -181,3 +181,32 @@
     direction: ltr;
   }
 }
+
+
+
+.__loading {
+  width: 100%; height: 10rem;
+  position: relative;
+
+  &::before {
+    width: 4rem; height: 4rem;
+    top: 2rem; left: calc(50% - 2rem);
+
+    animation: spin 2s linear infinite;
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: $teal;
+    border-width: 6px;
+    content: "";
+    position: absolute;
+  }
+
+  &::after {
+    top: 7rem; left: 0;
+
+    font-size: 1rem;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+  }
+}

sass/pages/_tour.scss

@@ -71,6 +71,14 @@
   float: right;
   padding: 1rem 0 1rem 1rem;
   vertical-align: top;
+
+  .loader {
+    @extend .__loading;
+
+    &::after {
+      content: "Processing request";
+    }
+  }
 }
 
 .tour__content__urlbar {
@@ -317,29 +325,10 @@
   grid-template-columns: 32% 32% 32%;
 
   &:empty {
-    width: 100%; height: 10rem;;
+    @extend .__loading;
-
-    &::before {
-      width: 4rem; height: 4rem;
-      top: 2rem; left: calc(50% - 2rem);
-
-      animation: spin 2s linear infinite;
-      border-radius: 50%;
-      border-style: solid;
-      border-top-color: $teal;
-      border-width: 6px;
-      content: "";
-      position: absolute;
-    }
 
     &::after {
-      top: 7rem; left: 0;
-
       content: "Fetching trending content from LBRY";
-      font-size: 1rem;
-      position: absolute;
-      text-align: center;
-      width: 100%;
     }
   }
 }