restore: add ... animation

dashboard/src/components/AnimatedDots.vue

@@ -0,0 +1,26 @@
+<template>
+   <span class="dots"></span>
+</template>
+
+<style scoped>
+
+.dots {
+  display: inline-block;
+  width: 1.5em;  /* reserve enough space for '...' */
+  text-align: left;
+}
+
+.dots::after {
+  content: '';
+  animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+  0%   { content: ''; }
+  25%  { content: '.'; }
+  50%  { content: '..'; }
+  75%  { content: '...'; }
+  100% { content: ''; }
+}
+
+</style>

dashboard/src/views/RestoreView.vue

@@ -8,6 +8,7 @@ import { redirectIfNeeded, mountlike, s3like } from  '../utils.js';
 import ProvisionModel from '../models/ProvisionModel.js';
 import BackupProviderForm from '../components/BackupProviderForm.vue';
 import Whirlpool from '../components/Whirlpool.vue';
+import AnimatedDots from '../components/AnimatedDots.vue';
 
 const provisionModel = ProvisionModel.create();
 
@@ -324,7 +325,7 @@ onMounted(async () => {
       <div class="view" v-if="waitingForRestore" style="max-width: unset; height: 100%;">
         <div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
           <Whirlpool/>
-          <h1>Please wait while Cloudron is restoring ...</h1>
+          <h1>Please wait while Cloudron is restoring <AnimatedDots/></h1>
           <h4 style="margin-top: 0">{{ progressMessage }}</h4>
           <small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
           <p v-show="taskMinutesActive >= 4">If restore appears stuck, it can be restarted by running <code @click="onCopyToClipboard('systemctl restart box')">systemctl restart box</code> and reloading this page.</p>

dashboard/src/views/SetupView.vue

@@ -8,6 +8,7 @@ import DomainsModel from '../models/DomainsModel.js';
 import ProvisionModel from '../models/ProvisionModel.js';
 import DomainProviderForm from '../components/DomainProviderForm.vue';
 import Whirlpool from '../components/Whirlpool.vue';
+import AnimatedDots from '../components/AnimatedDots.vue';
 
 const provisionModel = ProvisionModel.create();
 
@@ -175,7 +176,7 @@ onMounted(async () => {
       <div class="view" v-if="waitingForDnsSetup" style="max-width: unset; height: 100%;">
         <div style="display: flex; flex-direction: column; height: 100%; align-items: center;">
           <Whirlpool/>
-          <h1>Please wait while Cloudron is setting up the dashboard ...</h1>
+          <h1>Please wait while Cloudron is setting up the dashboard <AnimatedDots/></h1>
           <h4 style="margin-top: 0">{{ progressMessage }}</h4>
           <small>You can follow the logs on the server at <code @click="onCopyToClipboard('/home/yellowtent/platformdata/logs/box.log')">/home/yellowtent/platformdata/logs/box.log</code></small>
         </div>