Commit WIP changes.

src/components/FeedPage.vue

@@ -30,17 +30,25 @@
     <hr />
 
     <div class="uk-grid-xl" uk-grid="parallax: 0">
-        <div
-            :style="[{ background: backgroundColor }]"
-            class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
-            v-bind:key="video.url"
-            v-for="video in videos"
-        >
-            <VideoItem :video="video" />
-        </div>
+        <RecycleScroller :items="videos" :item-size="videos.length" key-field="url" v-slot="{ item }" page-mode>
+            <div
+                :style="[{ background: backgroundColor }]"
+                class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            >
+                <VideoItem :video="item" />
+            </div>
+        </RecycleScroller>
     </div>
 </template>
 
+<style>
+.vue-recycle-scroller__item-view {
+    position: relative !important;
+    transform: inherit !important;
+    will-change: unset !important;
+}
+</style>
+
 <script>
 import VideoItem from "@/components/VideoItem.vue";
 

src/main.js

@@ -47,6 +47,10 @@ import enLocale from "@/locales/en.json";
 
 const timeAgo = new TimeAgo("en-US");
 
+import { RecycleScroller } from "vue-virtual-scroller";
+
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
 import("./registerServiceWorker");
 
 const mixin = {
@@ -229,5 +233,6 @@ const app = createApp(App);
 app.use(i18n);
 app.use(router);
 app.mixin(mixin);
+app.component("RecycleScroller", RecycleScroller);
 app.component("font-awesome-icon", FontAwesomeIcon);
 app.mount("#app");