Replace loading text with progress bar (#51)

Author: fauxpark

package.json

@@ -9,9 +9,6 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.4.0",
     "lodash": "^4.17.21",

src/App.vue

@@ -1,8 +1,7 @@
 <template>
   <h1>QMK API Keyboard Status</h1>
   <div v-if="loading" id="loading">
-    <font-awesome-icon icon="atom" spin size="6x" fixed-width />
-    <h2>Loading Data… {{ loadProgress }}%</h2>
+    <ProgressBar :progress="loadProgress" />
   </div>
   <div v-else>
     <input v-model="filter" id="filter" placeholder="filter keyboards" />
@@ -16,7 +15,12 @@
     <BuildList :list="passingKeyboards" :filter="filter" @show-error-pane="showErrors">
       Builds Passing
     </BuildList>
-    <ErrorPane :visible="showErrorPane" :error-log="errorLog" :loading="errorLogLoading" @backdrop-clicked="hideErrors" />
+    <ErrorPane
+      :visible="showErrorPane"
+      :error-log="errorLog"
+      :loading="errorLogLoading"
+      @backdrop-clicked="hideErrors"
+    />
   </div>
 </template>
 
@@ -28,6 +32,7 @@ import reduce from 'lodash/reduce'
 
 import BuildList from '@/components/BuildList.vue'
 import ErrorPane from '@/components/ErrorPane.vue'
+import ProgressBar from '@/components/ProgressBar.vue'
 
 let buildLog = {}
 
@@ -89,7 +94,7 @@ async function loadBuildLog(keyboard) {
     buildLog[keyboard].message = `ERROR: ${e.message}`
   }
 
-  errorLogLoading.value = false;
+  errorLogLoading.value = false
   errorLog.value = buildLog[keyboard].message
 }
 
@@ -176,6 +181,10 @@ body {
 
 #loading {
   margin-top: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
 }
 
 @media (max-width: 640px) {

src/components/ProgressBar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="progress-bar">
+    <div class="filled" :style="style"></div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  progress: {
+    type: Number,
+    required: true
+  }
+})
+
+const style = computed(() => {
+  return {
+    width: `${props.progress}%`
+  }
+})
+</script>
+
+<style scoped>
+.progress-bar {
+  height: 8px;
+  width: 400px;
+  border: 2px solid #2c3e50;
+  padding: 2px;
+  border-radius: 16px;
+}
+
+.progress-bar .filled {
+  height: 8px;
+  background-color: #2c3e50;
+  transition: width 0.2s;
+  border-radius: 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .progress-bar {
+    border-color: #ced9e4;
+  }
+  .progress-bar .filled {
+    background-color: #ced9e4;
+  }
+}
+</style>

src/main.js

@@ -1,12 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faAtom } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-library.add(faAtom)
-
 const app = createApp(App)
-app.component('font-awesome-icon', FontAwesomeIcon)
 app.mount('#app')

yarn.lock

@@ -149,30 +149,6 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
   integrity sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==
 
-"@fortawesome/[email protected]":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
-  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
-
-"@fortawesome/fontawesome-svg-core@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
-  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-solid-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
-  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/vue-fontawesome@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz#633e2998d11f7d4ed41f0d5ea461a22ec9b9d034"
-  integrity sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==
-
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"