Fix onboarding screen flashing on screen while extension initializes (#753)

Author: mymindstorm

src/components/Popup/MainBody.vue

@@ -39,7 +39,7 @@
         v-bind:entry="entry"
         v-bind:tabindex="getTabindex(entry)"
       />
-      <div class="no-entry" v-if="entries.length === 0">
+      <div class="no-entry" v-if="entries.length === 0 && initComplete">
         <IconKey />
         <p>
           {{ i18n.no_entires }}
@@ -68,7 +68,7 @@ const computed: {
   shouldFilter: () => boolean;
   entries: () => OTPEntry[];
 } = {
-  ...mapState("accounts", ["filter", "showSearch"]),
+  ...mapState("accounts", ["filter", "showSearch", "initComplete"]),
   ...mapGetters("accounts", ["shouldFilter", "entries"]),
 };
 

src/definitions/module-interface.d.ts

@@ -73,6 +73,7 @@ interface AccountsState {
   exportEncData: { [k: string]: OTPEntryInterface };
   key: { enc: string; hash: string } | null;
   wrongPassword: boolean;
+  initComplete: boolean;
 }
 
 interface NotificationState {

src/popup.ts

@@ -69,6 +69,9 @@ async function init() {
       instance.$store.commit("style/showInfo", true);
       instance.$store.commit("currentView/changeView", "EnterPasswordPage");
     }
+  } else {
+    // Set init complete if no encryption is present, otherwise this will be set in updateEntries.
+    instance.$store.commit("accounts/initComplete");
   }
 
   // Auto focus on first entry

src/store/Accounts.ts

@@ -28,6 +28,7 @@ export class Accounts implements Module {
         exportEncData: await EntryStorage.getExport(entries, true),
         key: await BrowserStorage.getKey(),
         wrongPassword: false,
+        initComplete: false,
       },
       getters: {
         shouldFilter(
@@ -156,6 +157,9 @@ export class Accounts implements Module {
         wrongPassword(state: AccountsState) {
           state.wrongPassword = true;
         },
+        initComplete(state: AccountsState) {
+          state.initComplete = true;
+        },
       },
       actions: {
         deleteCode: async (
@@ -435,6 +439,7 @@ export class Accounts implements Module {
             await EntryStorage.getExport(state.state.entries, true)
           );
           state.commit("updateKeyExport", await BrowserStorage.getKey());
+          state.commit("initComplete");
           return;
         },
         clearFilter: (state: ActionContext<AccountsState, {}>) => {