Skip to content

Commit

Permalink
perf: render less elements in cookie modal
Browse files Browse the repository at this point in the history
  • Loading branch information
LeoniePeters authored Jan 29, 2025
1 parent 1efd5b6 commit 4da6731
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 33 deletions.
36 changes: 17 additions & 19 deletions packages/portal/src/components/page/PageCookiesSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,24 +47,20 @@
{{ $tc('klaro.main.consentModal.servicesCount', servicesCount, { count: $n(servicesCount)}) }}
<span class="icon-chevron ml-1" />
</b-button>
<ul
v-show="depth > COLLAPSIBLE_DEPTH_LIMIT || show.includes(serviceData.name)"
:class="{'pl-0': depth > COLLAPSIBLE_DEPTH_LIMIT}"
>
<li
<template v-if="depth > COLLAPSIBLE_DEPTH_LIMIT || show.includes(serviceData.name)">
<PageCookiesSection
v-for="(subService, subServiceIndex) in serviceData.services"
:key="subServiceIndex"
>
<PageCookiesSection
:checked-services="checkedServices"
:depth="depth + 1"
:service-data="subService"
:show="show"
@toggle="toggleDisplay"
@update="updateServiceConsent"
/>
</li>
</ul>
class="nested-section"
:class="{'pl-0': depth > COLLAPSIBLE_DEPTH_LIMIT}"
:checked-services="checkedServices"
:depth="depth + 1"
:service-data="subService"
:show="show"
@toggle="toggleDisplay"
@update="updateServiceConsent"
/>
</template>
</template>
</div>
</template>
Expand Down Expand Up @@ -177,10 +173,12 @@
padding-left: 2rem;
}
ul {
.nested-section {
padding-left: 2rem;
margin-bottom: 0.5rem;
list-style: none;
&:last-child {
margin-bottom: 0.5rem;
}
}
.label {
Expand Down
23 changes: 9 additions & 14 deletions packages/portal/src/components/page/PageCookiesWidget.vue
Original file line number Diff line number Diff line change
Expand Up @@ -66,20 +66,15 @@
</SmartLink>
</template>
</i18n>
<ul>
<li
v-for="(section, index) in groupedSections"
:key="index"
>
<PageCookiesSection
:checked-services="checkedServices"
:service-data="section"
:show="show"
@toggle="toggleDisplay"
@update="updateConsent"
/>
</li>
</ul>
<PageCookiesSection
v-for="(section, index) in groupedSections"
:key="index"
:checked-services="checkedServices"
:service-data="section"
:show="show"
@toggle="toggleDisplay"
@update="updateConsent"
/>
<div class="d-flex flex-wrap justify-content-between align-items-center">
<b-button
class="mt-2"
Expand Down

0 comments on commit 4da6731

Please sign in to comment.