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
+          //User
-            const {data:requests} = await axios.get("/.requests")
-            this.requests = requests
-          //Initialization
             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,
+          version:"",
-          hosted,
+          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 */

source/app/web/statics/app.js

@@ -1,13 +1,6 @@
 ;(async function() {
   //Init
-    const {data:templates} = await axios.get("/.templates")
-    const {data:plugins} = await axios.get("/.plugins")
     const {data:metadata} = await axios.get("/.plugins.metadata")
-    const {data:base} = await axios.get("/.plugins.base")
-    const {data:version} = await axios.get("/.version")
-    const {data:hosted} = await axios.get("/.hosted")
-    templates.sort((a, b) => (a.name.startsWith("@") ^ b.name.startsWith("@")) ? (a.name.startsWith("@") ? 1 : -1) : a.name.localeCompare(b.name))
-  //Disable unsupported options
     delete metadata.core.web.output
     delete metadata.core.web.twemojis
   //App
@@ -20,9 +13,42 @@
               this.config.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
               this.palette = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
             } catch (error) {}
+          //Init
+            await Promise.all([
               //GitHub limit tracker
+                (async () => {
                   const {data:requests} = await axios.get("/.requests")
                   this.requests = requests
+                })(),
+              //Templates
+                (async () => {
+                  const {data:templates} = await axios.get("/.templates")
+                  templates.sort((a, b) => (a.name.startsWith("@") ^ b.name.startsWith("@")) ? (a.name.startsWith("@") ? 1 : -1) : a.name.localeCompare(b.name))
+                  this.templates.list = templates
+                  this.templates.selected = templates[0]?.name||"classic"
+                })(),
+              //Plugins
+                (async () => {
+                  const {data:plugins} = await axios.get("/.plugins")
+                  this.plugins.list = plugins
+                })(),
+              //Base
+                (async () => {
+                  const {data:base} = await axios.get("/.plugins.base")
+                  this.plugins.base = base
+                  this.plugins.enabled.base = Object.fromEntries(base.map(key => [key, true]))
+                })(),
+              //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
+                })(),
+            ])
           //Generate placeholder
             this.mock({timeout:200})
             setInterval(() => {
@@ -46,7 +72,7 @@
         },
       //Data initialization
         data:{
-          version,
+          version:"",
           user:"",
           mode:"metrics",
           tab:"overview",
@@ -55,11 +81,11 @@
           cached:new Map(),
           config:Object.fromEntries(Object.entries(metadata.core.web).map(([key, {defaulted}]) => [key, defaulted])),
           metadata:Object.fromEntries(Object.entries(metadata).map(([key, {web}]) => [key, web])),
-          hosted,
+          hosted:null,
           plugins:{
-            base,
+            base:{},
-            list:plugins,
+            list:[],
-            enabled:{base:Object.fromEntries(base.map(key => [key, true]))},
+            enabled:{},
             descriptions:{
               base:"🗃️ Base content",
               "base.header":"Header",
@@ -78,8 +104,8 @@
             },
           },
           templates:{
-            list:templates,
+            list:[],
-            selected:templates[0]?.name||"classic",
+            selected:"classic",
             placeholder:{
               timeout:null,
               image:""
@@ -128,7 +154,7 @@
               //Config
                 const config = Object.entries(this.config).filter(([key, value]) => (value)&&(value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => `config.${key}=${encodeURIComponent(value)}`)
               //Template
-                const template = (this.templates.selected !== templates[0]) ? [`template=${this.templates.selected}`] : []
+                const template = (this.templates.selected !== this.templates.list[0]) ? [`template=${this.templates.selected}`] : []
               //Generated url
                 const params = [...template, ...base, ...plugins, ...options, ...config].join("&")
                 return `${window.location.protocol}//${window.location.host}/${this.user}${params.length ? `?${params}` : ""}`

source/app/web/statics/index.html

@@ -16,9 +16,9 @@
     <main :class="[palette]">
       <template>
 
-        <header v-once>
+        <header>
           <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 {{ version }}</a>
         </header>
 
         <div class="ui top">
@@ -51,7 +51,12 @@
 
             <input type="text" v-model="user" placeholder="Your GitHub username" :disabled="generated.pending" @keyup.enter="(!user)||(generated.pending)||(unusable.length > 0) ? null : generate()">
             <button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)">
-              {{ generated.pending ? 'Working on it :)' : 'Generate your metrics!' }}
+              <template v-if="generated.pending">
+                Generating metrics<span class="loading"></span>
+              </template>
+              <template v-else>
+                Generate your metrics!
+              </template>
             </button>
             <small>{{ requests.remaining }} GitHub requests remaining</small>
             <div class="warning" v-if="unusable.length">
@@ -121,10 +126,15 @@
 
           <div class="preview">
 
+            <div class="readmes">
               <div class="readme">
                 <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
                 <span>{{ user }}</span><span class="slash">/</span>README<span class="md">.md</span>
               </div>
+              <div class="readme">
+                <a href="https://github.com/lowlighter/metrics/discussions">Send feedback</a>
+              </div>
+            </div>
 
             <div v-if="tab == 'overview'">
               <div class="error" v-if="generated.error">
@@ -151,7 +161,7 @@
 
         <iframe v-else src="/about?embed=1" frameborder="0"></iframe>
 
-        <footer v-once>
+        <footer>
           <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/style.css

@@ -1,15 +1,20 @@
-body {
+/* General */
+  body {
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
     margin: 0;
     padding: 0;
     background-color: var(--color-bg-canvas);
     color: var(--color-text-primary);
-}
+  }
 
-iframe {
+  iframe {
     width: 100%;
     height: 100%;
-}
+  }
+
+  a:hover {
+    cursor: pointer;
+  }
 
 /* Header */
   header {
@@ -100,7 +105,7 @@ iframe {
     cursor: not-allowed;
   }
 
-  nav > div:hover {
+  nav > div:not(.active):hover {
     color: var(--color-underlinenav-text-hover);
     border-bottom: 2px solid var(--color-underlinenav-border-hover);
     transition-duration: all .12s ease-out;
@@ -152,12 +157,17 @@ iframe {
   }
 
 /* Readme */
-  .readme {
+  .readmes {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
     font-size: .75rem;
     margin-bottom: 1rem;
+  }
+  .readme {
+    display: flex;
+    align-items: center;
     color: var(--color-text-primary);
   }
   .readme svg {
@@ -215,6 +225,11 @@ iframe {
     color: var(--color-btn-primary-disabled-text);
     background-color: var(--color-btn-primary-disabled-bg);
     border-color: var(--color-btn-primary-disabled-border);
+    cursor: not-allowed;
+  }
+
+  input[disabled] {
+    cursor: wait;
   }
 
   button:focus {
@@ -292,6 +307,10 @@ iframe {
     .ui {
       flex-direction: row;
     }
+    .ui:not(.top) {
+      max-width: 1280px;
+      margin: .5rem auto;
+    }
     .ui.top aside {
       display: block;
     }
@@ -300,5 +319,23 @@ iframe {
     }
     aside {
       max-width: 25%;
+      width: 100%;
     }
   }
+
+/*Loading animation*/
+  .loading {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+  .loading::after {
+    overflow: hidden;
+    display: inline-block;
+    content: "...";
+    animation: loading-dots-keyframes 1.2s steps(4, jump-none) infinite;
+  }
+
+  @keyframes loading-dots-keyframes {
+    0% { transform: translateX(-100%); }
+  }