Make placeholders work

learningequality · Jul 17, 2024 · 6addb69 · 6addb69
1 parent 11b16e9
commit 6addb69
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 11 deletions.
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -191,9 +191,14 @@
         :headingLevel="2"
         layout="vertical"
         thumbnailDisplay="large"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+        thumbnailSrc=""
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
         <template #aboveTitle>
           <KGrid>
 
@@ -413,9 +418,13 @@
         :headingLevel="2"
         layout="vertical"
         thumbnailDisplay="small"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
         <template #aboveTitle>
           <KGrid>
 
@@ -634,9 +643,13 @@
         :headingLevel="2"
         layout="horizontal"
         thumbnailDisplay="large"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
         <template #aboveTitle>
           <KGrid>
 
@@ -857,9 +870,13 @@
         :headingLevel="2"
         layout="horizontal"
         thumbnailDisplay="small"
-        :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
+        <template #thumbnailPlaceholder>
+          <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+            <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
+          </span>
+        </template>
         <template #aboveTitle>
           <KGrid>
 

diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
@@ -14,19 +14,32 @@
     </template>
     <template #default>
       <div class="thumbnail">
+        <!-- 
+          Render KImg even if thumbnailSrc is not provided since in that case
+          KImg takes care of showing the gray placeholder area.
+        -->
         <KImg
-          v-if="thumbnailSrc"
           :src="thumbnailSrc"
           :scaleType="thumbnailScaleType"
           :aspectRatio="thumbnailAspectRatio"
           :isDecorative="true"
           :appearanceOverrides="thumbnailStyles"
+        />
+        <!--
+          This is a duplicate of the same slot in KImg. I didn't find a way to utilize
+          KImg's placeholder slot from here, likely because this part of code is nested
+          in one slot already
+
+          Show it even when thumbnail source is provided - then the placeholder serves
+          as progressive loading experience.
+        -->
+        <span
+          v-if="$slots.thumbnailPlaceholder"
+          class="thumbnailPlaceholder"
         >
-          <template #placehoder>
-            <slot v-if="!thumbnailSrc" name="thumbnailPlaceholder"></slot>
-
-          </template>
-        </KImg>
+          <!-- @slot Places content to the thumbnail placeholder area. -->
+          <slot name="thumbnailPlaceholder"></slot>
+        </span>
       </div>
       <div
         data-test="aboveTitle"
@@ -270,7 +283,7 @@
   /************* Common styles **************/
 
   .k-card {
-    position: relative;
+    position: relative; /* basis for absolute positioning of thumbnail images */
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -279,6 +292,7 @@
   }
 
   .thumbnail {
+    position: relative; /* basis for absolute positioning of 'thumbnailPlaceholder' slot content */
     order: 1;
   }
 
@@ -306,6 +320,15 @@
     overflow: hidden; /* (1) */
   }
 
+  .thumbnailPlaceholder {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0; /* <img> in KImg with z-index 1 should cover the placeholder after loaded */
+  }
+
   /************* Layout-specific styles *************/
 
   .vertical-with-large-thumbnail {