Skip to content

Fix/wrong display of skeleton loaders #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 22, 2025
Merged

Fix/wrong display of skeleton loaders #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e263c4
only show skeleton loaders when actually navigatin and not when click…
m-borgmann May 21, 2025
fded31c
improve variant selection styling
m-borgmann May 21, 2025
c8c933f
optimize dependencies in dev mode for better DX
m-borgmann May 21, 2025
aefc9b4
revert vite depOptimization entry
m-borgmann May 21, 2025
8083696
increase version
m-borgmann May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/Cms/Element/CmsElementCategoryNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/Navigation/NavigationLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }}
Expand Down
5 changes: 1 addition & 4 deletions components/Product/ProductVariantSelection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) ?? []"
Expand Down
5 changes: 4 additions & 1 deletion composables/useActivePath.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down