fix messages

index.html

@@ -198,8 +198,8 @@
               Current topic:
               <span class="underline">{{selectedData.text}}</span>
             </span>
-            <span v-else-if="initialSpin">No current topic</span>
-            <span v-else>Spinning...</span>
+            <span v-else-if="spinning">Spinning...</span>
+            <span v-else>No current topic</span>
           </div>
           <div class="font-light">
             <span v-if="noData">End of meeting?</span>
@@ -210,7 +210,10 @@
             <span v-else-if="showSelected" class="animate-pulse">
               Start <b>timer</b> or click the wheel to <b>spin</b>
             </span>
-            <span v-else>Wheeeeee</span>
+            <span v-else-if="spinning">Wheeeeee</span>
+            <span v-else class="animate-pulse">
+              Click the wheel to <b>spin</b> !
+            </span>
           </div>
         </div>
         <div class="grow rounded-box overflow-hidden justify-center">

main.js

@@ -55,6 +55,7 @@ let app = {
       sound: undefined,
       themes: DAISYUI_THEMES,
       currentTheme: "cmyk",
+      spinning: false,
     };
   },
   watch: {
@@ -190,11 +191,13 @@ let app = {
         this.meetingStart = new Date();
       }
       this.initialSpin = false;
+      this.spinning = true;
       this.wheelPosition += 360 * 10 + Math.random() * 360;
       clearTimeout(this.timeoutId);
       this.selected = this.getSelected();
       this.timeoutId = setTimeout(() => {
         this.showSelected = true;
+        this.spinning = false;
         confetti({
           particleCount: 400,
           startVelocity: 100,