Infinite pagination.

package.json

@@ -23,7 +23,8 @@
     "react-bootstrap": "^1.3.0",
     "react-dom": "16.13.1",
     "react-photoswipe": "^1.3.0",
-    "react-window": "^1.8.5",
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.8.6",
     "react-window-infinite-loader": "^1.0.5",
     "scrypt-js": "^3.0.1",
     "styled-components": "^5.2.0",

src/pages/gallery/index.tsx

@@ -8,12 +8,13 @@ import PreviewCard from './components/PreviewCard';
 import { getActualKey } from 'utils/common/key';
 import styled from 'styled-components';
 import { PhotoSwipeGallery } from 'react-photoswipe';
-import InfiniteLoader from 'react-window-infinite-loader';
-import { FixedSizeGrid as Grid } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList as List } from 'react-window';
 
 const Container = styled.div`
-    max-width: 1000px;
-    display: flex;
+    display: block;
+    flex: 1;
+    width: 100%;
     flex-wrap: wrap;
     margin: 0 auto;
 
@@ -23,6 +24,11 @@ const Container = styled.div`
     }
 `;
 
+const ListItem = styled.div`
+   display: flex;
+   justify-content: center;
+`;
+
 const PAGE_SIZE = 12;
 const COLUMNS = 3;
 
@@ -59,14 +65,24 @@ export default function Gallery() {
     )
 
     return (<Container>
-        <PhotoSwipeGallery
-            items={data.map(item => ({
-                ...item,
-                src: '/image.svg',
-                w: window.innerWidth,
-                h: window.innerHeight,
-            }))}
-            thumbnailContent={getThumbnail}
-        />
+        <AutoSizer>
+            {({ height, width }) => (
+                <List
+                    itemSize={200}
+                    height={height}
+                    width={width}
+                    itemCount={data.length / 5}
+                    
+                >
+                    {({ index, style }) => <ListItem style={style}>
+                        {getThumbnail(data[index * 5])}
+                        {getThumbnail(data[index * 5 + 1])}
+                        {getThumbnail(data[index * 5 + 2])}
+                        {getThumbnail(data[index * 5 + 3])}
+                        {getThumbnail(data[index * 5 + 4])}
+                    </ListItem>}
+                </List>
+            )}
+        </AutoSizer>
     </Container>);
 }

yarn.lock

@@ -4964,15 +4964,20 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized-auto-sizer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
+  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
+
 react-window-infinite-loader@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.5.tgz#6fe094d538a88978c2c9b623052bc50cb28c2abc"
   integrity sha512-IcPIq8lADK3zsAcqoLqQGyduicqR6jWkiK2VUX5sKSI9X/rou6OWlOEexnGyujdNTG7hSG8OVBFEhLSDs4qrxg==
 
-react-window@^1.8.5:
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
-  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+react-window@^1.8.6:
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"