Skip to content

Use Vuetify's lazy attribute to delay mounting of DOM nodes #3483

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
rtibbles merged 2 commits into from
Aug 26, 2022
Merged

Use Vuetify's lazy attribute to delay mounting of DOM nodes #3483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd142e4
Make tooltips lazy to avoid mounting DOM nodes until we need to
bjester Aug 4, 2022
387337c
Update menus to be lazy
bjester Aug 5, 2022
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 ...uration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
confirmButtonText="Delete"
@confirm="softDeleteHandler"
/>
<VMenu offset-y>
<Menu>
<template #activator="{ on }">
<VBtn v-bind="$attrs" v-on="on">
actions
Expand Down Expand Up @@ -108,7 +108,7 @@
</VListTile>
</template>
</VList>
</VMenu>
</Menu>

</div>

Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<Checkbox v-model="selected" />
</VFlex>
<VFlex shrink>
<VTooltip v-if="channel.public && !channel.deleted" bottom z-index="200">
<VTooltip v-if="channel.public && !channel.deleted" bottom z-index="200" lazy>
<template #activator="{ on }">
<span class="px-1 py-2" v-on="on">
<Icon color="light-green accent-4">
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
:delimit="false"
>
<template #item="{ item }">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<VChip
small
Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
v-model="emailDialog"
:query="{ ids: [userId] }"
/>
<VMenu offsetY>
<Menu>
Copy link
Copy Markdown
Member

@marcellamaki marcellamaki Aug 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see in the notes that you updated <Menu /> to use the lazy setting (and can see the prop added there). Is lazy not an option for VMenu which is why you switched just to <Menu/>? Or is this for another reason?

Copy link
Copy Markdown
Member Author

@bjester bjester Aug 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lazy is indeed an option for VMenu. Our Menu inherits VMenu, and so I updated this since it also defaults the offsetY attribute-- I'm sure we'll want that 99% of the time for our menus anyways. There were many usages of Menu, so by adding lazy there, I took advantage of that abstraction layer requiring a single change. We can do the same when we migrate off Vuetify and to KDS for things like this.

<template #activator="{ on }">
<VBtn v-bind="$attrs" v-on="on">
Actions
Expand Down Expand Up @@ -88,7 +88,7 @@
</VListTile>
</template>
</VList>
</VMenu>
</Menu>
</div>

</template>
Expand Down
7 changes: 3 additions & 4 deletions contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<Checkbox v-model="selected" />
</VFlex>
<VFlex shrink>
<VTooltip v-if="user.is_admin" bottom z-index="200">
<VTooltip v-if="user.is_admin" bottom z-index="200" lazy>
<template #activator="{ on }">
<span class="px-1 py-2" v-on="on">
<Icon color="light-green accent-4">
Expand All @@ -33,11 +33,10 @@
<td>{{ user.email }}</td>
<td style="min-width: 175px;">
<!-- Using VMenu instead of VEditDialog to have more control over actions -->
<VMenu
<Menu
v-if="user.is_active"
v-model="showStorage"
:close-on-content-click="false"
offset-y
>
<template #activator="{ on }">
{{ formatFileSize(user.disk_space) }}
Expand All @@ -57,7 +56,7 @@
/>
</VCardText>
</VCard>
</VMenu>
</Menu>
<span v-else>Inactive</span>
</td>
<td>
Expand Down
1 change: 1 addition & 0 deletions contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<VTooltip
bottom
:disabled="!isListItemDisabled(childNode)"
lazy
>
<template #activator="{ on }">
<span
Expand Down
2 changes: 1 addition & 1 deletion ...ion/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
</span>
</template>

<VTooltip v-else top>
<VTooltip v-else top lazy>
<template #activator="{ on }">
<Icon class="red--text" v-on="on">
error
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:key="`${action}-${idx}`"
class="toolbar-item"
>
<VTooltip top>
<VTooltip top lazy>
<template #activator="{ on }">
<VBtn
icon
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>

<span v-if="message">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon color="greenSuccess" small v-on="on">
{{ showFilled ? 'lens' : 'trip_origin' }}
Expand Down
4 changes: 1 addition & 3 deletions ...entcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,7 @@
</span>
<span v-if="(isTopic && node.coach_count) || isCoach">
<!-- for each learning activity -->


<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<div style="display: inline-block;" v-on="on">
<Icon
Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</span>
</span>
<span v-else-if="error" class="mx-2">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon color="red" v-on="on">
error
Expand All @@ -17,7 +17,7 @@
</VTooltip>
</span>
<span v-else-if="warning" class="mx-2">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon color="amber" v-on="on">
warning
Expand Down
2 changes: 1 addition & 1 deletion ...entcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</VListTileContent>

<VListTileAction>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<VBtn
icon
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
/>
<VCard v-else-if="isResource && !isExercise" class="preview-error" flat>
<VLayout align-center justify-center fill-height>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon color="red" v-on="on">
error
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
</VBtn>
</VFlex>
<VFlex shrink class="px-1">
<VTooltip :disabled="!hasTitle(node)" bottom open-delay="500">
<VTooltip :disabled="!hasTitle(node)" bottom open-delay="500" lazy>
<template #activator="{ on }">
<Icon v-on="on">
{{ node.resource_count ? "folder" : "folder_open" }}
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@click:clear="$nextTick(() => removeAll())"
>
<template #selection="data">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on, attrs }">
<VChip v-bind="attrs" close v-on="on" @input="remove(data.item.value)">
{{ data.item.text }}
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
error
</Icon>
</div>
<VTooltip v-else-if="erroredFiles.length" top>
<VTooltip v-else-if="erroredFiles.length" top lazy>
<template #activator="{ on }">
<Icon color="red" v-on="on">
error
Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
@click="trackTab('Details')"
>
{{ $tr(tabs.DETAILS) }}
<VTooltip v-if="!areDetailsValid || !areFilesValid" top>
<VTooltip v-if="!areDetailsValid || !areFilesValid" top lazy>
<template #activator="{ on }">
<Icon color="red" dark small class="ml-2" v-on="on">
error
Expand All @@ -37,7 +37,7 @@
@click="trackTab('Questions')"
>
{{ $tr(tabs.QUESTIONS) }}
<VTooltip v-if="!areAssessmentItemsValid" top>
<VTooltip v-if="!areAssessmentItemsValid" top lazy>
<template #activator="{ on }">
<Icon color="red" dark v-on="on">
error
Expand Down
2 changes: 1 addition & 1 deletion ...ntcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
{{ languageName }}
</span>
<span v-if="node.coach_count || isCoach">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<div class="my-1" style="display: inline-block;" v-on="on">
<Icon
Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<OfflineText indicator />
<ProgressModal />
<div v-if="errorsInChannel && canEdit" class="mx-1">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<div class="amber--text title" style="width: max-content;" v-on="on">
{{ $formatNumber(errorsInChannel) }}
Expand All @@ -63,7 +63,7 @@
<span v-if="canManage && isRicecooker" class="font-weight-bold grey--text subheading">
{{ $tr('apiGenerated') }}
</span>
<VTooltip v-if="canManage" bottom attach="body">
<VTooltip v-if="canManage" bottom attach="body" lazy>
<template #activator="{ on }">
<!-- Need to wrap in div to enable tooltip when button is disabled -->
<div style="height: 100%;" v-on="on">
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

<VCard v-else class="message-card" flat>
<VLayout align-center justify-center fill-height data-test="not-supported">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon color="grey lighten-2" large v-on="on">
visibility_off
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="preview-wrapper">
<VCard v-if="!primaryFileCount" flat class="mb-2 message-card">
<VLayout align-center justify-center fill-height>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon color="red" v-on="on">
error
Expand Down
4 changes: 2 additions & 2 deletions contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<template>
<VListTileAction>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<VBtn
icon
Expand All @@ -25,7 +25,7 @@
</VTooltip>
</VListTileAction>
<VListTileAction>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<VBtn
icon
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
{{ $tr('unpublishedText') }}
</VCardText>
</VFlex>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<Icon
v-if="allowEdit && hasUnpublishedChanges"
Expand Down
4 changes: 2 additions & 2 deletions ...curation/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
@change="languageInput = ''"
>
<template #selection="{ item }">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<VChip class="ma-1" v-on="on">
<div class="text-truncate">
Expand All @@ -31,7 +31,7 @@
<template #item="{ item }">
<Checkbox :key="item.id" :input-value="value" :value="item.id" class="mt-0">
<template #label>
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<div class="text-truncate" style="width: 250px;" v-on="on">
{{ item.name }}
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>

<VTooltip maxWidth="150px" v-bind="$attrs">
<VTooltip maxWidth="150px" v-bind="$attrs" lazy>
<template #activator="{ on }">
<Icon color="primary" :small="small" v-on="on">
{{ icon }}
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
@focus="$emit('focus')"
>
<template #item="{ item }">
<VTooltip bottom>
<VTooltip bottom lazy>
<template #activator="{ on }">
<span class="text-truncate" v-on="on">{{ languageText(item) }}</span>
</template>
Expand Down
4 changes: 4 additions & 0 deletions contentcuration/contentcuration/frontend/shared/views/Menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
type: Boolean,
default: true,
},
lazy: {
type: Boolean,
default: true,
},
/* eslint-enable kolibri/vue-no-unused-properties */
},
};
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>

<VFadeTransition v-if="offline && !libraryMode" data-test="text">
<VTooltip v-if="indicator" bottom z-index="300">
<VTooltip v-if="indicator" bottom z-index="300" lazy>
<template #activator="{ on }">
<div class="px-4" v-on="on">
<Icon class="mx-2">
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/shared/views/details/Details.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
<DetailsRow :label="$tr('licensesLabel')">
<template #default>
<template v-if="!printing">
<VTooltip v-for="license in details.licenses" :key="license" top>
<VTooltip v-for="license in details.licenses" :key="license" top lazy>
<template #activator="{ on }">
<VChip class="tag" v-on="on">
{{ translateConstant(license) }}
Expand Down
2 changes: 1 addition & 1 deletion contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>

<div>
<VTooltip v-if="hasErrors" top>
<VTooltip v-if="hasErrors" top lazy>
<template #activator="{ on }">
<Icon color="red" :large="large" v-on="on">
error
Expand Down