🔨 Add fade-in after words are loaded (#34)

* Add fade transition

* Add wordsLoaded state & trigger load from parent

assets/css/main.css

@@ -21,3 +21,12 @@ body {
 .hover-gibson:focus {
     color: var(--blue);
 }
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 500ms ease-in-out;
+}
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}

components/Ipsum.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import Word from '~/components/Word'
 
@@ -50,13 +50,7 @@ export default {
         },
     },
 
-    mounted() {
-        this.fetchWords()
-    },
-
     methods: {
-        ...mapActions(['fetchWords']),
-
         buildParagraph(pLength) {
             let numSentences = Math.max(
                 2,

pages/index.vue

@@ -14,15 +14,24 @@
                     Gibson Ipsum
                 </h1>
                 <intro></intro>
-                <!--<span class="dib mr4 mr5-ns">By @stormwarning</span>-->
             </div>
             <controls></controls>
         </header>
-        <ipsum></ipsum>
+        <transition name="fade" mode="out-in">
+            <ipsum v-if="wordsLoaded"></ipsum>
+            <main v-else class="h-100 ph2 pb6 ml5 ph0-ns pv6-ns ml0-ns code">
+                <p class="f6 measure-wide mt4 mt0-ns center"
+                    >The sky above the port was the color of television, tuned
+                    to a dead channel...</p
+                >
+            </main>
+        </transition>
     </article>
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex'
+
 import Ipsum from '~/components/Ipsum'
 import Intro from '~/components/Intro'
 import Controls from '~/components/Controls'
@@ -33,5 +42,19 @@ export default {
         Intro,
         Controls,
     },
+
+    computed: {
+        ...mapGetters({
+            wordsLoaded: 'getWordsLoaded',
+        }),
+    },
+
+    mounted() {
+        this.fetchWords()
+    },
+
+    methods: {
+        ...mapActions(['fetchWords']),
+    },
 }
 </script>

store/index.js

@@ -27,13 +27,15 @@ export const state = () => ({
     l33t: false,
     nihongo: false,
     words: [],
+    wordsLoaded: false,
     randomAdjective: 'cyberpunk',
 })
 
 export const getters = {
     getParagraphs: (state) => state.paragraphs,
     getSentences: (state) => state.sentences,
     getWordList: (state) => state.words,
+    getWordsLoaded: (state) => state.wordsLoaded,
     getAdjective: (state) => state.randomAdjective,
     getNihongo: (state) => state.nihongo,
 }
@@ -48,6 +50,9 @@ export const mutations = {
     setWordList(state, wordData) {
         state.words = wordData
     },
+    setWordsLoaded(state, boolean) {
+        state.wordsLoaded = boolean
+    },
     setAdjective(state, adjective) {
         state.randomAdjective = adjective
     },
@@ -63,6 +68,7 @@ export const actions = {
 
         getAllWords(dataURL, (wordlist) => {
             commit('setWordList', wordlist)
+            commit('setWordsLoaded', true)
 
             let filteredWords = wordlist.filter((word) => {
                 return (