@saooti/octopus-sdk 37.0.58 → 37.0.60

package/index.html

@@ -17,13 +17,13 @@
     <!-- built files will be auto injected -->
   </body>
   <!-- Test digiteka video -->
-  <script type="text/javascript">
+  <!-- <script type="text/javascript">
     var _ultimedia_host = (window.location.protocol == 'https:' ? 'https' : 'http') + "://www.ultimedia.com";
     var _ultimedia_script = document.createElement("script");
   
     _ultimedia_script.setAttribute("type", "text/javascript");
     _ultimedia_script.setAttribute("src", _ultimedia_host + '/js/common/visible_player.js');
     document.getElementsByTagName('head')[0].appendChild(_ultimedia_script);
-  </script>
+  </script> -->
   <script type="module" src="./src/main.ts"></script>
 </html>

package/index.ts

@@ -30,6 +30,7 @@ export const getMessageModal = () => import("./src/components/misc/modal/Message
 export const getErrorMessage = () => import("./src/components/misc/ErrorMessage.vue");
 export const getPopover = () => import("./src/components/misc/ClassicPopover.vue");
 export const getClassicModal = () => import("./src/components/misc/modal/ClassicModal.vue");
+export const getClassicLazy = () => import("./src/components/misc/ClassicLazy.vue");
 
 
 //Display

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.58",
+  "version": "37.0.60",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -24,6 +24,7 @@
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
     "@vuepic/vue-datepicker": "^7.0.0",
+    "@vueuse/core": "^10.5.0",
     "autoprefixer": "^10.4.16",
     "axios": "^1.5.1",
     "dayjs": "^1.11.10",

package/public/css/fonts/icomoon.svg

@@ -46,7 +46,7 @@
 <glyph unicode="&#xe924;" glyph-name="send" horiz-adv-x="820" d="M425 422.657l-334.37-33.308-88.397-281.845c-7.687-23.062 5.126-47.402 28.184-55.087 10.249-3.843 21.778-2.562 32.029 2.562l734.080 354.87c20.499 10.251 29.465 34.587 19.218 56.37-3.843 8.968-10.251 15.373-19.218 19.216l-732.799 356.151c-21.778 10.251-47.4 1.281-58.93-20.499-5.126-10.249-6.405-21.778-2.56-32.027l88.397-281.843 334.37-32.029c14.094-1.279 25.622-14.094 23.062-29.465 0-12.811-10.249-21.778-23.062-23.062v0z" />
 <glyph unicode="&#xe925;" glyph-name="search" horiz-adv-x="820" d="M803.702 129.737l-132.279 132.279c47.436 63.527 73.349 142.309 73.349 223.599 0 99.052-38.451 192.253-108.247 262.677-70.214 70.841-164.042 109.71-264.14 109.71-98.634 0-191.836-38.869-262.677-109.71s-109.71-164.251-109.71-262.886c0-100.097 39.078-193.925 109.71-264.14 70.423-69.796 163.624-108.247 262.677-108.247 81.29 0 160.072 25.912 223.599 73.349l132.279-132.279c10.24-10.24 23.823-16.091 37.824-16.091s27.375 5.642 37.824 16.091 16.091 23.823 16.091 37.824c-0.418 14.001-6.060 27.375-16.3 37.824zM637.152 485.406c0-146.071-118.696-264.766-264.766-264.766s-264.766 118.696-264.766 264.766c0 143.563 121.203 264.766 264.766 264.766 145.862 0 264.766-118.696 264.766-264.766z" />
 <glyph unicode="&#xe926;" glyph-name="facebook" horiz-adv-x="820" d="M666.262 960.001h-132.917c-148.868 0-245.632-98.892-245.632-252.011v-115.906h-132.917c-11.695 0-21.269-9.569-21.269-21.269v-168.008c0-11.698 9.569-21.267 21.269-21.267h132.917v-424.274c0-11.698 9.569-21.267 21.269-21.267h174.389c11.698 0 21.269 9.569 21.269 21.267v425.337h156.312c11.698 0 21.267 9.569 21.267 21.267v168.008c0 5.318-2.129 10.632-6.377 14.885s-9.569 6.377-14.887 6.377h-157.374v97.827c0 46.786 11.698 71.244 72.307 71.244h89.319c11.698 0 21.267 9.569 21.267 21.269v155.247c0 11.695-8.506 21.269-20.203 21.269z" />
-<glyph unicode="&#xe927;" glyph-name="twitter" d="M1024.001 765.577c-37.644-16.731-78.156-28.020-120.664-33.072 43.401 25.983 76.681 67.14 92.374 116.236-40.595-24.090-85.535-41.573-133.406-51.010-38.309 40.824-92.915 66.352-153.341 66.352-116.009 0-210.069-94.059-210.069-210.089 0-16.442 1.849-32.469 5.445-47.873-174.605 8.771-329.423 92.397-433.044 219.506-18.083-31.013-28.436-67.1-28.436-105.636 0-72.877 37.082-137.19 93.456-174.854-34.422 1.102-66.828 10.56-95.16 26.295-0.023-0.872-0.023-1.768-0.023-2.662 0-101.77 72.421-186.662 168.537-205.992-17.628-4.78-36.188-7.359-55.355-7.359-13.553 0-26.709 1.31-39.534 3.781 26.753-83.455 104.326-144.216 196.245-145.901-71.901-56.353-162.466-89.943-260.912-89.943-16.942 0-33.675 0.998-50.115 2.952 92.998-59.635 203.417-94.39 322.043-94.39 386.441 0 597.733 320.11 597.733 597.733 0 9.104-0.187 18.187-0.582 27.21 41.034 29.559 76.66 66.578 104.804 108.713z" />
+<glyph unicode="&#xe927;" glyph-name="twitter" d="M2.632 927.298l395.466-528.706-398.099-429.89h89.501l348.286 376.229 281.463-376.229h304.75l-417.538 558.472 370.357 400.123h-89.501l-320.747-346.666-259.189 346.666h-304.75zM134.252 861.285h139.922l618.207-826.571h-139.922l-618.207 826.571z" />
 <glyph unicode="&#xe928;" glyph-name="remove" horiz-adv-x="820" d="M58.572 799.427l702.857-702.857zM761.43 38.001c-17.569 0-29.29 5.862-41 17.569l-702.857 702.857c-23.431 23.431-23.431 58.569 0 81.999s58.569 23.431 81.999 0l702.857-702.857c23.431-23.431 23.431-58.569 0-81.999-11.71-11.71-23.431-17.569-41-17.569zM761.43 799.427l-702.857-702.857zM58.572 38.001c-17.569 0-29.29 5.862-41 17.569-23.431 23.431-23.431 58.569 0 81.999l702.857 702.857c23.431 23.431 58.569 23.431 81.999 0s23.431-58.569 0-81.999l-702.857-702.857c-11.71-11.71-23.431-17.569-41-17.569z" />
 <glyph unicode="&#xe929;" glyph-name="rss" horiz-adv-x="820" d="M170.835 140.497c0-37.741-30.593-68.334-68.334-68.334s-68.334 30.595-68.334 68.334c0 37.741 30.593 68.334 68.334 68.334s68.334-30.595 68.334-68.334zM102.501 37.998c-54.666 0-102.501 47.833-102.501 102.501s47.833 102.501 102.501 102.501 102.501-47.833 102.501-102.501-47.833-102.501-102.501-102.501zM102.501 174.664c-20.499 0-34.165-13.666-34.165-34.167s13.666-34.165 34.165-34.165 34.165 13.666 34.165 34.165-13.666 34.165-34.165 34.165zM478.335 37.998c-41 0-68.334 27.334-68.334 68.334 0 191.335-150.335 341.667-341.667 341.667-41 0-68.334 27.334-68.334 68.334s27.334 68.334 68.334 68.334c266.502 0 478.336-211.836 478.336-478.336 0-41-27.334-68.334-68.334-68.334zM751.668 37.998c-41 0-68.334 27.334-68.334 68.334 0 341.667-273.335 615.002-615.002 615.002-41 0-68.334 27.334-68.334 68.334s27.334 68.334 68.334 68.334c416.837 0 751.669-334.834 751.669-751.669 0-41-27.334-68.334-68.334-68.334z" />
 <glyph unicode="&#xe92a;" glyph-name="stop" horiz-adv-x="820" d="M75.524 851.067h668.949c41.617 0 75.528-33.91 75.528-75.528v-655.077c0-41.617-33.91-75.528-75.528-75.528h-668.949c-41.615 0-75.526 33.91-75.526 75.528v655.077c0 41.617 33.91 75.526 75.526 75.526z" />

package/public/css/fonts/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('/css/fonts/icomoon.eot?gdc25d');
-  src:  url('/css/fonts/icomoon.eot?gdc25d#iefix') format('embedded-opentype'),
-    url('/css/fonts/icomoon.ttf?gdc25d') format('truetype'),
-    url('/css/fonts/icomoon.woff?gdc25d') format('woff'),
-    url('/css/fonts/icomoon.svg?gdc25d#icomoon') format('svg');
+  src:  url('/css/fonts/icomoon.eot?yi2y5s');
+  src:  url('/css/fonts/icomoon.eot?yi2y5s#iefix') format('embedded-opentype'),
+    url('/css/fonts/icomoon.ttf?yi2y5s') format('truetype'),
+    url('/css/fonts/icomoon.woff?yi2y5s') format('woff'),
+    url('/css/fonts/icomoon.svg?yi2y5s#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;

package/src/App.vue

@@ -8,16 +8,22 @@
     />
     <CategoryFilter />
     <router-view />
-    <FooterOctopus />
+    <ClassicLazy
+      v-if="pageFullyLoad"
+      :min-height="125"
+      :unrender="true"
+    >
+      <FooterOctopus />
+    </ClassicLazy>
     <PlayerComponent />
   </div>
 </template>
 
 <script lang="ts">
 import TopBar from "@/components/misc/TopBar.vue";
-import FooterOctopus from "@/components/misc/FooterSection.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import CategoryFilter from "@/components/display/categories/CategoryFilter.vue";
+import ClassicLazy from "@/components/misc/ClassicLazy.vue";
 import { state } from "./stores/ParamSdkStore";
 import { Rubriquage } from "./stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "./stores/class/rubrique/rubriquageFilter";
@@ -31,6 +37,9 @@ import { Category } from "./stores/class/general/category";
 const LeftMenu = defineAsyncComponent(
   () => import("@/components/misc/LeftMenu.vue"),
 );
+const FooterOctopus = defineAsyncComponent(
+  () => import("@/components/misc/FooterSection.vue"),
+);
 export default defineComponent({
   name: "App",
 
@@ -40,6 +49,7 @@ export default defineComponent({
     CategoryFilter,
     FooterOctopus,
     PlayerComponent,
+    ClassicLazy
   },
 
   mixins: [initSDK],
@@ -49,6 +59,7 @@ export default defineComponent({
       displayMenu: false as boolean,
       reload: false as boolean,
       isInit: false as boolean,
+      pageFullyLoad: false as boolean
     };
   },
 
@@ -65,6 +76,9 @@ export default defineComponent({
   },
   async created() {
     await this.initApp();
+    setTimeout(()=>{
+      this.pageFullyLoad = true;
+    }, 2000)
   },
   methods: {
     ...mapActions(useFilterStore, ["filterUpdateIab", "filterUpdateRubrique"]),

package/src/assets/bootstrap.scss

@@ -227,7 +227,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 	}
 	.btn-twitter {
 			background: #d2ecfc !important;
-			color: #1da1f2 !important;
+			//color: #1da1f2 !important;
 			&:hover {
 					background: #bbe3fb !important;
 			}

package/src/components/display/emission/EmissionList.vue

@@ -19,9 +19,19 @@
         class="emission-list"
         :class="smallItems ? 'three-emissions' : 'two-emissions'"
       >
-        <template v-for="e in displayArray" :key="e.emissionId">
+        <ClassicLazy v-for="e in displayArray" :key="e.emissionId" :minHeight="250" :unrender="true">
           <EmissionItem v-if="0 !== e.emissionId" :emission="e" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'emission',
+                params: { emissionId: e.emissionId }
+              }"
+            >
+              {{ e.name }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
       <div
         v-else
@@ -46,6 +56,7 @@
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import octopusApi from "@saooti/octopus-api";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { handle403 } from "../../mixins/handle403";
 import { state } from "../../../stores/ParamSdkStore";
 import { Emission, emptyEmissionData } from "@/stores/class/general/emission";
@@ -67,6 +78,7 @@ export default defineComponent({
     EmissionItem,
     EmissionPlayerItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

package/src/components/display/participant/ParticipantList.vue

@@ -17,9 +17,19 @@
   >
     <template #list>
       <div class="podcast-list">
-        <template v-for="p in displayArray" :key="p.participantId">
+        <ClassicLazy v-for="p in displayArray" :key="p.participantId" :minHeight="360" :unrender="true">
           <ParticipantItem v-if="0 !== p.participantId" :participant="p" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'participant',
+                params: { participantId: p.participantId },
+              }"
+            >
+              {{ p.lastName }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
     </template>
   </ListPaginate>
@@ -27,6 +37,7 @@
 
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { handle403 } from "../../mixins/handle403";
 import octopusApi from "@saooti/octopus-api";
 import ParticipantItem from "./ParticipantItem.vue";
@@ -44,6 +55,7 @@ export default defineComponent({
   components: {
     ParticipantItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

package/src/components/display/playlist/PlaylistList.vue

@@ -15,15 +15,26 @@
   >
     <template #list>
       <div class="emission-list two-emissions">
-        <template v-for="p in displayArray" :key="p.playlistId">
+        <ClassicLazy v-for="p in displayArray" :key="p.playlistId" :minHeight="250" :unrender="true">
           <PlaylistItem v-if="0 !== p.playlistId" :playlist="p" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'playlist',
+                params: { playlistId: p.playlistId },
+              }"
+            >
+              {{ p.title }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
     </template>
   </ListPaginate>
 </template>
 
 <script lang="ts">
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import ListPaginate from "../list/ListPaginate.vue";
 import { handle403 } from "../../mixins/handle403";
 import octopusApi from "@saooti/octopus-api";
@@ -39,6 +50,7 @@ export default defineComponent({
   components: {
     PlaylistItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

package/src/components/display/playlist/PodcastList.vue

@@ -31,9 +31,19 @@
     >
       <template #list>
         <div class="podcast-list">
-          <template v-for="p in podcastsDisplay" :key="p.podcastId">
+          <ClassicLazy v-for="p in podcastsDisplay" :key="p.podcastId" :minHeight="410" :unrender="true">
             <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
-          </template>
+            <template #preview>
+              <router-link
+                :to="{
+                  name: 'podcast',
+                  params: { podcastId: p.podcastId }
+                }"
+              >
+                {{ p.title }}
+              </router-link>
+            </template>
+          </ClassicLazy>
         </div>
       </template>
     </ListPaginate>
@@ -48,6 +58,7 @@ import octopusApi from "@saooti/octopus-api";
 import PodcastItem from "../podcasts/PodcastItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import ClassicSearch from "../../form/ClassicSearch.vue";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Playlist } from "@/stores/class/general/playlist";
 import { defineComponent } from "vue";
@@ -59,6 +70,7 @@ export default defineComponent({
     PodcastItem,
     ClassicSearch,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403, orgaComputed],

package/src/components/display/podcasts/PodcastList.vue

@@ -21,9 +21,19 @@
   >
     <template #list>
       <div class="podcast-list">
-        <template v-for="p in displayArray" :key="p.podcastId">
+        <ClassicLazy v-for="p in displayArray" :key="p.podcastId" :minHeight="410" :unrender="true">
           <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'podcast',
+                params: { podcastId: p.podcastId }
+              }"
+            >
+              {{ p.title }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
     </template>
   </ListPaginate>
@@ -34,6 +44,7 @@ import ListPaginate from "../list/ListPaginate.vue";
 import { handle403 } from "../../mixins/handle403";
 import octopusApi from "@saooti/octopus-api";
 import PodcastItem from "./PodcastItem.vue";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { useAuthStore } from "@/stores/AuthStore";
 import { useFilterStore } from "@/stores/FilterStore";
@@ -48,6 +59,7 @@ export default defineComponent({
   components: {
     PodcastItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

package/src/components/display/sharing/ShareButtonsIntern.vue

@@ -176,7 +176,7 @@ export default defineComponent({
           condition: true,
         },
         {
-          title: "Twitter",
+          title: "X",
           icon: "saooti-twitter",
           className: "btn-twitter",
           url: `https://twitter.com/intent/tweet?text=${this.urlPage}`,

package/src/components/misc/ClassicLazy.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    ref="targetEl"
+    :style="`min-height:${fixedMinHeight ? fixedMinHeight : minHeight}px`"
+  >
+    <slot v-if="shouldRender" />
+    <slot v-else name="preview" />
+  </div>
+</template>
+<script lang="ts">
+import { useIntersectionObserver } from "@vueuse/core";
+import { ref, nextTick } from "vue";
+
+function onIdle(cb = () => {}) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(cb);
+  } else {
+    setTimeout(() => {
+      nextTick(cb);
+    }, 300);
+  }
+}
+
+export default {
+  props: {
+    renderOnIdle: Boolean,
+    unrender: Boolean,
+    minHeight: Number,
+    unrenderDelay: {
+      type: Number,
+      default: 10000,
+    },
+  },
+  setup(props) {
+    const shouldRender = ref(false);
+    const targetEl = ref();
+    const fixedMinHeight = ref(0);
+    let unrenderTimer;
+    let renderTimer;
+
+    const { stop } = useIntersectionObserver(
+      targetEl,
+      ([{ isIntersecting }]) => {
+        if (isIntersecting) {
+          // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
+          clearTimeout(unrenderTimer);
+          // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
+          renderTimer = setTimeout(
+            () => (shouldRender.value = true),
+            props.unrender ? 200 : 0
+          );
+          shouldRender.value = true;
+          if (!props.unrender) {
+            stop();
+          }
+        } else if (props.unrender) {
+          // if the component was set to render, cancel that
+          clearTimeout(renderTimer);
+          unrenderTimer = setTimeout(() => {
+            fixedMinHeight.value = targetEl.value.clientHeight;
+            shouldRender.value = false;
+          }, props.unrenderDelay);
+        }
+      },
+      {
+        rootMargin: "600px",
+      }
+    );
+
+    if (props.renderOnIdle) {
+      onIdle(() => {
+        shouldRender.value = true;
+        if (!props.unrender) {
+          stop();
+        }
+      });
+    }
+
+    return { targetEl, shouldRender, fixedMinHeight };
+  },
+};
+</script>

package/src/components/misc/TopBar.vue

@@ -28,7 +28,7 @@
       />
     </router-link>
     <OrganisationChooserLight
-      v-if="!isPodcastmaker && organisation"
+      v-if="!isPodcastmaker && organisationId"
       page="topBar"
       width="auto"
       :defaultanswer="$t('No organisation filter')"

package/src/components/pages/EmissionPage.vue

@@ -116,7 +116,7 @@ export default defineComponent({
     EditBox,
     SubscribeButtons,
     LiveHorizontalList,
-    ClassicLoading,
+    ClassicLoading
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {

package/src/components/pages/HomePage.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="page-box">
     <template v-if="0 === rubriquageFilter.length">
-      <PodcastInlineList
+      <ClassicLazy 
         v-for="c in categories"
         :key="c.id"
-        :iab-id="c.id"
-        :title="c.name"
-        :button-text="$t('All podcast button', { name: c.name })"
-      />
+        :minHeight="650" 
+        :unrender="true"
+      >
+        <PodcastInlineList
+          :iab-id="c.id"
+          :title="c.name"
+          :button-text="$t('All podcast button', { name: c.name })"
+        />
+      </ClassicLazy>
     </template>
     <template v-else>
-      <PodcastInlineList
+      <ClassicLazy 
         v-for="r in rubriqueToShow"
         :key="r.rubriqueId"
-        :rubrique-id="rubriqueId.concat(r.rubriqueId)"
-        :title="r.name"
-        :button-text="$t('All podcast button', { name: r.name })"
-      />
+        :minHeight="650" 
+        :unrender="true"
+      >
+        <PodcastInlineList
+          :rubrique-id="rubriqueId.concat(r.rubriqueId)"
+          :title="r.name"
+          :button-text="$t('All podcast button', { name: r.name })"
+        />
+      </ClassicLazy>
       <template v-if="rubriqueDisplay && rubriqueDisplay.length > 0">
         <PodcastInlineList
           v-if="rubriqueDisplay.length < rubriqueMaxDisplay"
@@ -48,6 +58,7 @@
 
 <script lang="ts">
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
+import ClassicLazy from "../misc/ClassicLazy.vue";
 import { state } from "../../stores/ParamSdkStore";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
@@ -61,6 +72,7 @@ export default defineComponent({
   name: "HomePage",
   components: {
     PodcastInlineList,
+    ClassicLazy
   },
   data() {
     return {

package/src/components/pages/PodcastPage.vue

@@ -46,18 +46,28 @@
           :title="$t('More episodes of this emission')"
           :button-text="$t('All podcast emission button')"
         />
-        <PodcastInlineList
-          :podcast-id="podcastId"
-          :title="$t('Suggested listening')"
-        />
-        <PodcastInlineList
+        <ClassicLazy
+          :min-height="550"
+          :unrender="true"
+        >
+          <PodcastInlineList
+            :podcast-id="podcastId"
+            :title="$t('Suggested listening')"
+          />
+        </ClassicLazy>
+        <ClassicLazy
           v-for="c in categories"
           :key="c.id"
-          :iab-id="c.id"
-          :href="'/main/pub/category/' + c.id"
-          :title="$t('More episodes of this category : ', { name: c.name })"
-          :button-text="$t('All podcast button', { name: c.name })"
-        />
+          :min-height="550"
+          :unrender="true"
+        >
+          <PodcastInlineList
+            :iab-id="c.id"
+            :href="'/main/pub/category/' + c.id"
+            :title="$t('More episodes of this category : ', { name: c.name })"
+            :button-text="$t('All podcast button', { name: c.name })"
+          />
+        </ClassicLazy>
       </div>
     </template>
     <ClassicLoading
@@ -76,6 +86,7 @@ import imageProxy from "../mixins/imageProxy";
 import { orgaComputed } from "../mixins/orgaComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import PodcastModuleBox from "../display/podcasts/PodcastModuleBox.vue";
+import ClassicLazy from "../misc/ClassicLazy.vue";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import octopusApi from "@saooti/octopus-api";
 import crudApi from "@/api/classicCrud";
@@ -116,6 +127,7 @@ export default defineComponent({
     CommentSection,
     PodcastModuleBox,
     ClassicLoading,
+    ClassicLazy,
   },
 
   mixins: [handle403, orgaComputed, imageProxy],