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>