Improve UX on web instances (#233)

- Loading indicators - Faster loading with delayed requests - Better CSS
2021-04-14 00:41:40 +02:00
parent d9c943f724
commit 9899c90520
6 changed files with 147 additions and 56 deletions
--- a/source/app/web/statics/about/index.html
+++ b/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>
--- a/source/app/web/statics/about/script.js
+++ b/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,
--- a/source/app/web/statics/about/style.css
+++ b/source/app/web/statics/about/style.css
@@ -106,7 +106,7 @@

 /* Isocalendar */
  .isocalendar .svg {
-    margin-top: 2rem;
+    margin-top: 5rem;
  }

 /* Activity */
--- a/source/app/web/statics/app.js
+++ b/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) {}
-          //GitHub limit tracker
-            const {data:requests} = await axios.get("/.requests")
-            this.requests = requests
+          //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,
-            list:plugins,
-            enabled:{base:Object.fromEntries(base.map(key => [key, true]))},
+            base:{},
+            list:[],
+            enabled:{},
            descriptions:{
              base:"🗃️ Base content",
              "base.header":"Header",
@@ -78,8 +104,8 @@
            },
          },
          templates:{
-            list:templates,
-            selected:templates[0]?.name||"classic",
+            list:[],
+            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}` : ""}`
--- a/source/app/web/statics/index.html
+++ b/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,9 +126,14 @@

          <div class="preview">

-            <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 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'">
@@ -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>
--- a/source/app/web/statics/style.css
+++ b/source/app/web/statics/style.css
@@ -1,15 +1,20 @@
-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);
-}
+/* 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 {
-  width: 100%;
-  height: 100%;
-}
+  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%); }
  }