Peng/345 eliminate flashing app

app/src/renderer/App.vue

@@ -1,12 +1,13 @@
 <template lang="pug">
 #app
-  app-header
-  #app-content
-    router-view
-    app-footer
-  notifications(:notifications='notifications' theme='cosmos')
-  modal-help
-  session
+  template(v-if="!config.modals.session.active")
+    app-header
+    #app-content
+      router-view
+      app-footer
+    notifications(:notifications='notifications' theme='cosmos')
+    modal-help
+  session(v-else)
 </template>
 
 <script>
@@ -27,7 +28,7 @@ export default {
     Session
   },
   computed: {
-    ...mapGetters(['notifications'])
+    ...mapGetters(['notifications', 'config'])
   },
   store
 }

app/src/renderer/components/common/NiSession.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
-.ni-session-wrapper(v-if="active")
+.ni-session-wrapper
   img.ni-session-backdrop(src="~assets/images/cosmos-logo.png")
+  session-loading(v-if="config.modals.session.state == 'loading'")
   session-welcome(v-if="config.modals.session.state == 'welcome'")
   session-sign-up(v-if="config.modals.session.state == 'sign-up'")
   session-sign-in(v-if="config.modals.session.state == 'sign-in'")
@@ -11,6 +12,7 @@
 
 <script>
 import {mapGetters} from 'vuex'
+import SessionLoading from 'common/NiSessionLoading'
 import SessionWelcome from 'common/NiSessionWelcome'
 import SessionSignUp from 'common/NiSessionSignUp'
 import SessionSignIn from 'common/NiSessionSignIn'
@@ -20,6 +22,7 @@ import SessionAccountDelete from 'common/NiSessionAccountDelete'
 export default {
   name: 'ni-session',
   components: {
+    SessionLoading,
     SessionWelcome,
     SessionSignUp,
     SessionSignIn,
@@ -28,8 +31,7 @@ export default {
     SessionAccountDelete
   },
   computed: {
-    ...mapGetters(['config']),
-    active () { return this.config.modals.session.active }
+    ...mapGetters(['config'])
   },
   beforeDestroy () {
     if (!this.config.devMode) {

app/src/renderer/components/common/NiSessionLoading.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+.ni-session: .ni-session-container
+  .ni-session-header
+    .ni-session-title Loading&hellip;
+  .ni-session-main &nbsp;
+  .ni-session-footer &nbsp;
+</template>
+
+<script>
+export default {
+  name: 'ni-session-loading'
+}
+</script>

app/src/renderer/vuex/modules/config.js

@@ -12,8 +12,8 @@ export default ({ commit }) => {
         active: false
       },
       session: {
-        active: false,
-        state: 'welcome'
+        active: true,
+        state: 'loading'
       },
       blockchain: {
         active: false
@@ -32,7 +32,7 @@ export default ({ commit }) => {
       if (value) {
         noScroll.on()
       } else {
-        state.modals.session.state = 'welcome'
+        state.modals.session.state = 'loading'
         noScroll.off()
       }
       state.modals.session.active = value

app/src/renderer/vuex/modules/user.js

@@ -23,7 +23,6 @@ export default ({ commit, node }) => {
       let exists = state.accounts.length > 0
       let screen = exists ? 'sign-in' : 'welcome'
       commit('setModalSessionState', screen)
-      commit('setModalSession', true)
     },
     async loadAccounts ({ commit }) {
       try {

test/unit/specs/components/common/NISession.spec.js

@@ -20,6 +20,7 @@ describe('NiSessionWelcome', () => {
       localVue,
       store,
       stubs: {
+        'session-loading': '<session-loading />',
         'session-welcome': '<session-welcome />',
         'session-sign-up': '<session-sign-up />',
         'session-sign-in': '<session-sign-in />',
@@ -30,13 +31,20 @@ describe('NiSessionWelcome', () => {
     })
   })
 
-  it('should not show by default', () => {
-    expect(wrapper.isEmpty()).toBe(true)
+  it('should show by default', () => {
+    expect(wrapper.isEmpty()).toBe(false)
   })
 
-  it('should show a welcome screen if activated', () => {
+  it('should show a loading screen if activated', () => {
     store.commit('setModalSession', true)
     wrapper.update()
+    expect(wrapper.contains('session-loading')).toBe(true)
+  })
+
+  it('should show a welcome screen if selected', () => {
+    store.commit('setModalSession', true)
+    store.commit('setModalSessionState', 'welcome')
+    wrapper.update()
     expect(wrapper.contains('session-welcome')).toBe(true)
   })
 

test/unit/specs/components/common/NISessionLoading.spec.js

@@ -0,0 +1,15 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiSessionLoading from 'common/NiSessionLoading'
+
+describe('NiSessionLoading', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(NiSessionLoading)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+})

test/unit/specs/components/common/__snapshots__/NISessionLoading.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiSessionLoading has the expected html structure 1`] = `
+"<div class=\\"ni-session\\">
+   <div class=\\"ni-session-container\\">
+      <div class=\\"ni-session-header\\">
+         <div class=\\"ni-session-title\\">
+            Loading…
+         </div>
+</div>
+<div class=\\"ni-session-main\\">
+   &nbsp;
+</div>
+<div class=\\"ni-session-footer\\">
+   &nbsp;
+</div>
+</div>
+</div>"
+`;