Merge pull request #3483 from bjester/lazy-tooltips

Use Vuetify's lazy attribute to delay mounting of DOM nodes
learningequality · Aug 26, 2022 · 8006198 · 8006198
2 parents 6c7cb87 + 387337c
commit 8006198
Show file tree

Hide file tree

Showing 30 changed files with 42 additions and 40 deletions.
diff --git a/...uration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue b/...uration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue
@@ -42,7 +42,7 @@
       confirmButtonText="Delete"
       @confirm="softDeleteHandler"
     />
-    <VMenu offset-y>
+    <Menu>
       <template #activator="{ on }">
         <VBtn v-bind="$attrs" v-on="on">
           actions
@@ -108,7 +108,7 @@
           </VListTile>
         </template>
       </VList>
-    </VMenu>
+    </Menu>
 
   </div>
 

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue
@@ -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">

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/EmailUsersDialog.vue
@@ -30,7 +30,7 @@
                 :delimit="false"
               >
                 <template #item="{ item }">
-                  <VTooltip bottom>
+                  <VTooltip bottom lazy>
                     <template #activator="{ on }">
                       <VChip
                         small

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue
@@ -36,7 +36,7 @@
       v-model="emailDialog"
       :query="{ ids: [userId] }"
     />
-    <VMenu offsetY>
+    <Menu>
       <template #activator="{ on }">
         <VBtn v-bind="$attrs" v-on="on">
           Actions
@@ -88,7 +88,7 @@
           </VListTile>
         </template>
       </VList>
-    </VMenu>
+    </Menu>
   </div>
 
 </template>

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserItem.vue
@@ -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">
@@ -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) }}
@@ -57,7 +56,7 @@
             />
           </VCardText>
         </VCard>
-      </VMenu>
+      </Menu>
       <span v-else>Inactive</span>
     </td>
     <td>

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue
@@ -42,6 +42,7 @@
                 <VTooltip
                   bottom
                   :disabled="!isListItemDisabled(childNode)"
+                  lazy
                 >
                   <template #activator="{ on }">
                     <span

diff --git a/...ion/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue b/...ion/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemToolbar.vue
@@ -6,7 +6,7 @@
       :key="`${action}-${idx}`"
       class="toolbar-item"
     >
-      <VTooltip top>
+      <VTooltip top lazy>
         <template #activator="{ on }">
           <VBtn
             icon

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeChangedIcon.vue
@@ -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' }}

diff --git a/...entcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/...entcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
@@ -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
@@ -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

diff --git a/...entcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue b/...entcuration/frontend/channelEdit/components/RelatedResourcesList/RelatedResourcesList.vue
@@ -33,7 +33,7 @@
         </VListTileContent>
 
         <VListTileAction>
-          <VTooltip bottom>
+          <VTooltip bottom lazy>
             <template #activator="{ on }">
               <VBtn
                 icon

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -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" }}

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -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 }}

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditListItem.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditView.vue
@@ -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
@@ -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

diff --git a/...ntcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue b/...ntcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -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) }}
@@ -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">

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue
@@ -8,7 +8,7 @@
 
       <template>
         <VListTileAction>
-          <VTooltip bottom>
+          <VTooltip bottom lazy>
             <template #activator="{ on }">
               <VBtn
                 icon
@@ -25,7 +25,7 @@
           </VTooltip>
         </VListTileAction>
         <VListTileAction>
-          <VTooltip bottom>
+          <VTooltip bottom lazy>
             <template #activator="{ on }">
               <VBtn
                 icon

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -63,7 +63,7 @@
               {{ $tr('unpublishedText') }}
             </VCardText>
           </VFlex>
-          <VTooltip bottom>
+          <VTooltip bottom lazy>
             <template #activator="{ on }">
               <Icon
                 v-if="allowEdit && hasUnpublishedChanges"

diff --git a/...curation/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue b/...curation/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
@@ -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">
@@ -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 }}

diff --git a/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue b/contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue
@@ -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 }}

diff --git a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
@@ -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>

diff --git a/contentcuration/contentcuration/frontend/shared/views/Menu.vue b/contentcuration/contentcuration/frontend/shared/views/Menu.vue
@@ -23,6 +23,10 @@
         type: Boolean,
         default: true,
       },
+      lazy: {
+        type: Boolean,
+        default: true,
+      },
       /* eslint-enable kolibri/vue-no-unused-properties */
     },
   };

diff --git a/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue b/contentcuration/contentcuration/frontend/shared/views/OfflineText.vue
@@ -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">

diff --git a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
@@ -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) }}

diff --git a/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue b/contentcuration/contentcuration/frontend/shared/views/files/FileStatus.vue
@@ -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
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,6 +42,7 @@ @@
                     <VTooltip
                       bottom
                       :disabled="!isListItemDisabled(childNode)"
+                      lazy
                     >
                       <template #activator="{ on }">
                         <span
@@ Expand Down @@