Fix/wrong display of skeleton loaders (#156)

* only show skeleton loaders when actually navigatin and not when clicking already active category

* improve variant selection styling

* optimize dependencies in dev mode for better DX

* revert vite depOptimization entry

* increase version

Author: m-borgmann

components/Cms/Element/CmsElementCategoryNavigation.vue

@@ -26,7 +26,7 @@ const listingStore = useListingStore(route.path === '/search' ? 'search' : 'cate
                 :to="getCategoryRoute(item)"
                 class="text-lg"
                 :class="{ 'font-bold': isActive(item.seoUrls) }"
-                @click="listingStore.isLoading = true;"
+                @click="listingStore.isLoading = !isActive(item.seoUrls, true);"
             >
                 {{ getTranslatedProperty(item, 'name') }}
             </LocaleLink>
@@ -40,7 +40,7 @@ const listingStore = useListingStore(route.path === '/search' ? 'search' : 'cate
                     <LocaleLink
                         :to="getCategoryRoute(child)"
                         :class="{ 'font-bold': isActive(child.seoUrls) }"
-                        @click="listingStore.isLoading = true;"
+                        @click="listingStore.isLoading = !isActive(child.seoUrls, true);"
                     >
                         {{ getTranslatedProperty(child, 'name') }}
                     </LocaleLink>

components/Navigation/NavigationLink.vue

@@ -59,7 +59,7 @@ const listingStore = useListingStore(route.path === '/search' ? 'search' : 'cate
         :format="!isExternalLink"
         class="block transition-all hover:text-brand-primary"
         :class="[classes, isActive(navigationElement.seoUrls, activeWithExactMatch) ? activeClasses : '']"
-        @click="trackNavigation(navigationElement.level ? navigationElement.level - 1 : 0, getTranslatedProperty(navigationElement, 'name')); listingStore.isLoading = true;"
+        @click="trackNavigation(navigationElement.level ? navigationElement.level - 1 : 0, getTranslatedProperty(navigationElement, 'name')); listingStore.isLoading = !isActive(navigationElement.seoUrls, true);"
     >
         <template v-if="asAllItemsLink">
             {{ $t('navigation.sidebar.allItems') }}

components/Product/ProductVariantSelection.vue

@@ -87,11 +87,8 @@ const onVariantChange = async (groupName: string, optionId: string) => {
                     outer: {
                         'max-w-full min-w-32 w-full sm:w-fit': true,
                     },
-                    inner: {
-                        'pr-4': true,
-                    },
                     input: {
-                        'w-fit': true,
+                        'w-fit mr-2 text-ellipsis': true,
                     },
                 }"
                 :options="entityArrayToOptions<Schemas['PropertyGroupOption']>(group.options.sort((a: Schemas['PropertyGroupOption'], b: Schemas['PropertyGroupOption']) => (a.position ?? 999) - (b.position ?? 999)), 'name', false) ?? []"

composables/useActivePath.ts

@@ -2,11 +2,14 @@ import { useRoute } from 'vue-router';
 import type { Schemas } from '@shopware/api-client/api-types';
 
 export const useActivePath = () => {
+    // useRoute needs to be called here and not inside the function to prevent loss of context when calling the function outside the initial rendering process
+    const route = useRoute();
+
     const isActive = (path: Schemas['SeoUrl'][] | undefined, onlyExactMatch: boolean = false) => {
         if (!path) return false;
 
         const formattedPath = `/${path[0]?.seoPathInfo}`;
-        const { path: currentPath } = useRoute();
+        const currentPath = route.path;
 
         return onlyExactMatch ? formattedPath === currentPath : currentPath.includes(formattedPath);
     };

package.json

@@ -2,7 +2,7 @@
   "name": "@basecom-gmbh/pond",
   "type": "module",
   "main": "./nuxt.config.ts",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",