UX optimizations for words navigation block

super16 · Jan 28, 2023 · 11ab8f9 · 11ab8f9
1 parent 07041a1
commit 11ab8f9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 20 deletions.
diff --git a/src/components/AlphabetList.vue b/src/components/AlphabetList.vue
@@ -60,7 +60,7 @@ const { currentLetter } = storeToRefs(store);
 </script>
 
 <template>
-  <nav>
+  <nav class="flex justify-center">
     <ul class="flex flex-wrap">
       <li
         v-for="letter in alphabet"

diff --git a/src/components/NavigationHeader.vue b/src/components/NavigationHeader.vue
@@ -36,8 +36,6 @@ const { showInfo } = storeToRefs(store);
         </svg>
       </div>
     </div>
-    <div class="flex justify-center">
-      <AlphabetList />
-    </div>
+    <AlphabetList />
   </header>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -6,17 +6,20 @@ import TheWordMain from '@/components/TheWordMain.vue';
 export default createRouter({
   history: createWebHistory('/eesti/'),
   scrollBehavior(to) {
-    if (to.name === 'wordsList') {
-      const start = document.getElementById('start');
-      if (start) {
-        start.scrollIntoView({ behavior: 'smooth' });
+    return new Promise((resolve) => {
+      if (to.name === 'wordsList') {
+        const start = document.getElementById('start');
+        if (start) {
+          start.scrollIntoView({ behavior: 'smooth' });
+        }
+      } else if (to.name === 'exactWord') {
+        const definitionStart = document.getElementById('definition');
+        if (definitionStart) {
+          definitionStart.scrollIntoView({ behavior: 'smooth' });
+        }
       }
-    } else if (to.name === 'exactWord') {
-      const definitionStart = document.getElementById('definition');
-      if (definitionStart) {
-        definitionStart.scrollIntoView({ behavior: 'smooth' });
-      }
-    }
+      resolve();
+    });
   },
   routes: [
     {

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -4,6 +4,7 @@ import { defineStore } from 'pinia';
 import wordsFilter from '@/utils/wordsFilter';
 import domCleaner from '@/utils/domCleaner';
 import {
+  CategoryMemberObject,
   ParseParams,
   QueryParams,
   SectionObject,
@@ -39,6 +40,13 @@ export const mainStore = defineStore('main', {
     };
   },
   actions: {
+    addWords(filteredWords: CategoryMemberObject[]) {
+      filteredWords.forEach((fWord: CategoryMemberObject) => {
+        window.requestAnimationFrame(() => {
+          this.words.push(fWord);
+        });
+      });
+    },
     async getWords(letter: string): Promise<void> {
       const params: QueryParams = {
         cmstartsortkeyprefix: letter,
@@ -47,17 +55,15 @@ export const mainStore = defineStore('main', {
       let response = await axios.get('', { params });
       let data = response.data;
       let categoryMembers = data.query.categorymembers;
-      this.words = wordsFilter(categoryMembers, letter);
+      this.words = [];
+      this.addWords(wordsFilter(categoryMembers, letter));
       let lastElement = categoryMembers[categoryMembers.length - 1];
       while (data && lastElement?.title.startsWith(letter)) {
         params.cmcontinue = data.continue.cmcontinue;
         response = await axios.get('', { params });
         data = response.data;
         categoryMembers = data.query.categorymembers;
-        this.words = [
-          ...this.words,
-          ...wordsFilter(categoryMembers, letter),
-        ];
+        this.addWords(wordsFilter(categoryMembers, letter));
         lastElement = categoryMembers[categoryMembers.length - 1];
       }
     },

diff --git a/src/types.ts b/src/types.ts
@@ -55,6 +55,6 @@ export interface StoreState {
   currentPageId: number | null,
   currentWord: string,
   showInfo: boolean,
-  words: CategoryMemberObject[] | [];
+  words: CategoryMemberObject[];
 }