Fix gallery performance (aeharding#320)

src/features/feed/Feed.tsx

@@ -173,7 +173,7 @@ export default function Feed<I>({
           fetchMore();
         }}
         components={{ Header: header, Footer: footer }}
-        increaseViewportBy={5000}
+        increaseViewportBy={800}
       />
     </>
   );

src/features/gallery/GalleryImg.tsx

@@ -1,7 +1,5 @@
 import React, { FocusEvent, KeyboardEvent, useContext, useRef } from "react";
 import "photoswipe/dist/photoswipe.css";
-import { useAppDispatch } from "../../store";
-import { imageLoaded } from "./gallerySlice";
 import { PostView } from "lemmy-js-client";
 import { GalleryContext } from "./GalleryProvider";
 import { PreparedPhotoSwipeOptions } from "photoswipe";
@@ -31,7 +29,6 @@ export function GalleryImg({
   post,
   animationType,
 }: GalleryImgProps) {
-  const dispatch = useAppDispatch();
   const loaded = useRef(false);
   const imgRef = useRef<HTMLImageElement>(null);
   const { open } = useContext(GalleryContext);
@@ -55,14 +52,6 @@ export function GalleryImg({
         if (!src) return;
 
         loaded.current = true;
-
-        dispatch(
-          imageLoaded({
-            src,
-            width: e.target.naturalWidth,
-            height: e.target.naturalHeight,
-          })
-        );
       }}
     />
   );

src/features/gallery/GalleryProvider.tsx

@@ -10,7 +10,6 @@ import GalleryPostActions from "./GalleryPostActions";
 import { createPortal } from "react-dom";
 import { PostView } from "lemmy-js-client";
 import PhotoSwipeLightbox, { PreparedPhotoSwipeOptions } from "photoswipe";
-import { useAppSelector } from "../../store";
 import { getSafeArea, isAndroid } from "../../helpers/device";
 
 import "photoswipe/style.css";
@@ -52,9 +51,6 @@ interface GalleryProviderProps {
 }
 
 export default function GalleryProvider({ children }: GalleryProviderProps) {
-  const imageDimensionsBySrc = useAppSelector(
-    (state) => state.gallery.imageDimensionsBySrc
-  );
   const [actionContainer, setActionContainer] = useState<HTMLElement | null>(
     null
   );
@@ -90,15 +86,15 @@ export default function GalleryProvider({ children }: GalleryProviderProps) {
       animationType?: PreparedPhotoSwipeOptions["showHideAnimationType"]
     ) => {
       if (lightboxRef.current) return;
-      if (!imageDimensionsBySrc[img.src]) return;
 
       setPost(post);
 
       const instance = new PhotoSwipeLightbox({
         dataSource: [
           {
             src: img.src,
-            ...imageDimensionsBySrc[img.src],
+            height: img.naturalHeight,
+            width: img.naturalWidth,
           },
         ],
         showHideAnimationType: animationType ?? "fade",
@@ -229,7 +225,7 @@ export default function GalleryProvider({ children }: GalleryProviderProps) {
       instance.init();
       lightboxRef.current = instance;
     },
-    [imageDimensionsBySrc]
+    []
   );
 
   return (

src/store.ts

@@ -6,7 +6,6 @@ import commentSlice from "./features/comment/commentSlice";
 import communitySlice from "./features/community/communitySlice";
 import userSlice from "./features/user/userSlice";
 import inboxSlice from "./features/inbox/inboxSlice";
-import gallerySlice from "./features/gallery/gallerySlice";
 import appearanceSlice, {
   fetchSettingsFromDatabase,
 } from "./features/settings/appearance/appearanceSlice";
@@ -20,7 +19,6 @@ const store = configureStore({
     user: userSlice,
     inbox: inboxSlice,
     appearance: appearanceSlice,
-    gallery: gallerySlice,
   },
 });
 export type RootState = ReturnType<typeof store.getState>;