From 35abc3e02cdbf6c57c051b2323081b157171220c Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 20 Jul 2022 18:27:54 +0200
Subject: [PATCH] Setup Screen: Style in-progress text

* Rename: "... finding Blenders ..." to "Looking for Blender installs..."
* Rename: "... checking ..." to "Checking..."
---
 web/app/src/views/FirstTimeWizardView.vue | 26 +++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/app/src/views/FirstTimeWizardView.vue b/web/app/src/views/FirstTimeWizardView.vue
index b563662a..6f1f77e2 100644
--- a/web/app/src/views/FirstTimeWizardView.vue
+++ b/web/app/src/views/FirstTimeWizardView.vue
@@ -32,7 +32,8 @@
       <step-item title="Blender">
         <p>Choose which Blender to use below:</p>
 
-        <p v-if="isBlenderExeFinding">... finding Blenders ...</p>
+        <div v-if="isBlenderExeFinding" class="is-in-progress">Looking for Blender installs...</div>
+
         <div v-for="blender in allBlenders" class="blender-selector"
           :class="{ 'selected-blender': (blender == selectedBlender) }">
           <dl>
@@ -54,7 +55,9 @@
           <input v-model="customBlenderExe" type="text">
           <button type="submit">Check</button>
         </form>
-        <p v-if="isBlenderExeChecking">... checking ...</p>
+
+        <div v-if="isBlenderExeChecking" class="is-in-progress">Checking...</div>
+
         <p v-if="blenderExeCheckResult != null && blenderExeCheckResult.is_usable" class="check-ok">
           Found something, it is selected above.</p>
         <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
@@ -329,4 +332,23 @@ body.is-first-time-wizard #app {
   display: block;
   margin-left: auto;
 }
+
+.is-in-progress {
+  animation: is-in-progress 3s infinite linear;
+  background-image: linear-gradient(to left, var(--color-text-muted), rgba(255, 255, 255, 0.25), var(--color-text-muted));
+  background-size: 200px;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@keyframes is-in-progress {
+  0% {
+    background-position: 0px;
+  }
+
+  100% {
+    background-position: 200px;
+  }
+}
 </style>