♻️ (dev session) renaming component

src/components/DevSession.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dream-maker">
+  <div class="dev-session">
     <h2>dev {{ position }}</h2>
     <h4 v-show="isTurn">{{ session }}</h4>
   </div>
@@ -9,7 +9,7 @@
 import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
-  name: 'DreamMaker',
+  name: 'DevSession',
   props: {
     position: { type: String, required: true },
     isTurn: { type: Boolean, required: true },
@@ -19,7 +19,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.dream-maker {
+.dev-session {
   h4 {
     font-size: 24pt;
   }

src/views/Home.vue

@@ -6,19 +6,19 @@
       @update="(int) => (interval = int)"
     />
     <section class="developers">
-      <DreamMaker
+      <DevSession
         position="1"
         :is-turn="isProgrammer1Turn"
         :session="session"
       />
-      <DreamMaker
+      <DevSession
         position="2"
         :is-turn="!isProgrammer1Turn"
         :session="session"
       />
     </section>
     <div class="global-time">{{ time }}</div>
-    <div class="actions">
+    <div class="actions" v-if="ready">
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
@@ -27,20 +27,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted } from '@vue/composition-api'
+import {
+  defineComponent,
+  onUnmounted,
+  ref,
+  onMounted
+} from '@vue/composition-api'
 import { useTimer } from '@/hooks/useTimer'
-import DreamMaker from '@/components/DreamMaker.vue'
+import DevSession from '@/components/DevSession.vue'
 import ChilledMusic from '@/components/ChilledMusic.vue'
 import IntervalInput from '@/components/IntervalInput.vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
-    DreamMaker,
+    DevSession,
     ChilledMusic,
     IntervalInput
   },
   setup() {
+    const ready = ref(false)
+
     const {
       interval,
       start,
@@ -53,6 +60,10 @@ export default defineComponent({
 
     onUnmounted(clear)
 
+    onMounted(() => {
+      ready.value = true
+    })
+
     return {
       interval,
       start,
@@ -60,7 +71,8 @@ export default defineComponent({
       timeState,
       time,
       session,
-      isProgrammer1Turn
+      isProgrammer1Turn,
+      ready
     }
   }
 })