Full image load done.

src/pages/gallery/components/PreviewCard.tsx

@@ -30,12 +30,12 @@ export default function PreviewCard(props: IProps) {
     const { data, onClick, updateUrl } = props;
 
     useEffect(() => {
-        if (data && !data.src) {
+        if (data && !data.msrc) {
             const main = async () => {
                 const token = getData(LS_KEYS.USER).token;
                 const url = await getPreview(token, data);
                 setImgSrc(url);
-                data.src = url;
+                data.msrc = url;
                 updateUrl(url);
             }
             main();
@@ -43,12 +43,12 @@ export default function PreviewCard(props: IProps) {
     }, [data]);
 
     const handleClick = () => {
-        if (data.src || imgSrc) {
+        if (data.msrc || imgSrc) {
             onClick();
         }
     }
 
-    return <Cont onClick={handleClick} disabled={!data?.src && !imgSrc}>
-        <img src={data?.src || imgSrc} />
+    return <Cont onClick={handleClick} disabled={!data?.msrc && !imgSrc}>
+        <img src={data?.msrc || imgSrc} />
     </Cont>;
 }

src/pages/gallery/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import Spinner from 'react-bootstrap/Spinner';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
-import { file, getFiles } from 'services/fileService';
+import { file, getFile, getFiles, getPreview } from 'services/fileService';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import PreviewCard from './components/PreviewCard';
 import { getActualKey } from 'utils/common/key';
@@ -41,6 +41,7 @@ export default function Gallery() {
     const [options, setOptions] = useState<Options>({
         history: false,
     });
+    const fetching: { [k: number]: boolean }  = {};
 
     useEffect(() => {
         const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
@@ -69,9 +70,24 @@ export default function Gallery() {
     }
 
     const updateUrl = (index: number) => (url: string) => {
+        data[index] = {
+            ...data[index],
+            msrc: url,
+            w: window.innerWidth,
+            h: window.innerHeight,
+        }
+        if (!data[index].src) {
+            data[index].src = url;
+        }
+        setData(data);
+    }
+
+    const updateSrcUrl = (index: number, url: string) => {
         data[index] = {
             ...data[index],
             src: url,
+            w: window.innerWidth,
+            h: window.innerHeight,
         }
         setData(data);
     }
@@ -90,12 +106,43 @@ export default function Gallery() {
 
     const getThumbnail = (data: file[], index: number) => (
         <PreviewCard
+            key={`tile-${index}`}
             data={data[index]}
             updateUrl={updateUrl(index)}
             onClick={onThumbnailClick(index)}
         />
     )
 
+    const getSlideData = async (instance: any, index: number, item: file) => {
+        const token = getData(LS_KEYS.USER).token;
+        if (!item.msrc) {
+            const url = await getPreview(token, item);
+            updateUrl(index)(url);
+            item.msrc = url;
+            if (!item.src) {
+                item.src = url;
+            }
+            item.w = window.innerWidth;
+            item.h = window.innerHeight;
+            if (instance.framework.getScrollY() > 0) {
+                instance.invalidateCurrItems();
+                instance.updateSize(true);
+            }
+        }
+        if ((!item.src || item.src === item.msrc) && !fetching[index]) {
+            fetching[index] = true;
+            const url = await getFile(token, item);
+            updateSrcUrl(index, url);
+            item.src = url;
+            item.w = window.innerWidth;
+            item.h = window.innerHeight;
+            if (instance.framework.getScrollY() > 0) {
+                instance.invalidateCurrItems();
+                instance.updateSize(true);
+            }
+        }
+    }
+
     return (<Container>
         <AutoSizer>
             {({ height, width }) => {
@@ -135,6 +182,7 @@ export default function Gallery() {
             items={data}
             options={options}
             onClose={handleClose}
+            gettingData={getSlideData}
         />
     </Container>);
 }

src/services/fileService.ts

@@ -49,6 +49,7 @@ export interface file {
     keyDecryptionNonce: string;
     key: Uint8Array;
     src: string;
+    msrc: string;
     w: number;
     h: number;
 };