Improve UX on web instances (#233)

- Loading indicators
- Faster loading with delayed requests
- Better CSS

source/app/web/statics/about/index.html

@@ -16,9 +16,9 @@
     <main :class="[palette]">
       <template>
 
-        <header v-once v-if="!embed">
+        <header v-if="!embed">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
-          <a href="https://github.com/lowlighter/metrics">Metrics v{{ version }}</a>
+          <a href="https://github.com/lowlighter/metrics">Metrics Insights {{ version }}</a>
         </header>
 
         <section class="container center">
@@ -29,11 +29,17 @@
                 Search a GitHub user
               </h2>
               <small>{{ requests.remaining }} GitHub requests remaining</small>
+              <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions/229">GitHub discussions</a>!</small>
             </div>
             <div class="inputs">
               <input type="text" v-model="user" @keyup.enter="search" :disabled="pending">
               <button @click="search" :disabled="pending">
-                {{ pending ? 'Working on it :)' : 'Search user!' }}
+                <template v-if="pending">
+                  Searching<span class="loading"></span>
+                </template>
+                <template v-else>
+                  Search user!
+                </template>
               </button>
             </div>
             <small class="info">
@@ -43,9 +49,9 @@
               Share this profile using <a :href="url">{{ url }}</a>
             </small>
           </div>
-          <div v-else-if="!metrics">
+          <div v-else-if="(!metrics)&&(user)">
             <p>
-              Generating insights for {{ user }}...
+              Generating insights for {{ user }}<span class="loading"></span>
             </p>
           </div>
           <div class="error" v-if="error">
@@ -57,13 +63,13 @@
         <template v-if="metrics">
 
           <section class="container">
-            <div class="user">
+            <a :href="`https://github.com/${user}`" class="user">
               <img :src="account.avatar">
               <div class="info">
                 <div class="name">{{ account.name }}</div>
                 <div class="login">{{ account.login }}</div>
               </div>
-            </div>
+            </a>
           </section>
 
           <div class="rankeds">
@@ -298,7 +304,7 @@
 
         </template>
 
-        <footer v-once v-if="!embed">
+        <footer v-if="!embed">
           <a href="https://github.com/lowlighter/metrics">Repository</a>
           <a href="https://github.com/lowlighter/metrics/blob/master/LICENSE">License</a>
           <a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub Action</a>

source/app/web/statics/about/script.js

@@ -1,7 +1,4 @@
 ;(async function() {
-  //Init
-    const {data:version} = await axios.get("/.version")
-    const {data:hosted} = await axios.get("/.hosted")
   //App
     return new Vue({
       //Initialization
@@ -11,10 +8,7 @@
             try {
               this.palette = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
             } catch (error) {}
-          //GitHub limit tracker
-            const {data:requests} = await axios.get("/.requests")
-            this.requests = requests
-          //Initialization
+          //User
             const user = location.pathname.split("/").pop()
             if ((user)&&(user !== "about")) {
               this.user = user
@@ -24,6 +18,24 @@
               this.searchable = true
           //Embed
             this.embed = !!(new URLSearchParams(location.search).get("embed"))
+          //Init
+            await Promise.all([
+              //GitHub limit tracker
+                (async () => {
+                  const {data:requests} = await axios.get("/.requests")
+                  this.requests = requests
+                })(),
+              //Version
+                (async () => {
+                  const {data:version} = await axios.get("/.version")
+                  this.version = `v${version}`
+                })(),
+              //Hosted
+                (async () => {
+                  const {data:hosted} = await axios.get("/.hosted")
+                  this.hosted = hosted
+                })(),
+            ])
         },
       //Watchers
         watch:{
@@ -98,8 +110,8 @@
         },
       //Data initialization
         data:{
-          version,
-          hosted,
+          version:"",
+          hosted:null,
           user:"",
           embed:false,
           searchable:false,

source/app/web/statics/about/style.css

@@ -106,7 +106,7 @@
 
 /* Isocalendar */
   .isocalendar .svg {
-    margin-top: 2rem;
+    margin-top: 5rem;
   }
 
 /* Activity */