fix(images): ⚡ Blur Data URLs

src/components/BackgroundImage.tsx

@@ -4,9 +4,13 @@ import Image from 'next/image';
 export default function Background({
 	src,
 	children,
+	loading,
+	priority = false,
 	...props
 }: {
 	src: string | StaticImport;
+	loading?: 'eager' | 'lazy' | undefined;
+	priority?: boolean;
 	children?: any;
 	[k: string]: any;
 }) {
@@ -17,7 +21,8 @@ export default function Background({
 				onClick={props.onClick}
 			>
 				<Image
-					loading="eager"
+					loading={loading}
+					priority={priority}
 					// {...props} //@ts-ignore
 					// rootStyle={undefined}
 					alt="Mountains"

src/components/GalleryGrid.tsx

@@ -1,11 +1,20 @@
-import { Avatar, Badge, Group, SimpleGrid, Title, useMantineTheme } from '@mantine/core';
 import { AnimatePresence, motion } from 'framer-motion';
+import {
+	Avatar,
+	Badge,
+	Grid,
+	GridCol,
+	Group,
+	SimpleGrid,
+	Title,
+	useMantineTheme,
+} from '@mantine/core';
 
-import { useHover } from '@mantine/hooks';
+import BackgroundImage from './BackgroundImage';
 import Link from 'next/link';
 import React from 'react';
+import { useHover } from '@mantine/hooks';
 import { useIsClient } from '../hooks/useIsClient';
-import BackgroundImage from './BackgroundImage';
 
 interface GalleryGridProps {
 	images: GalleryGridImageProps[];
@@ -27,11 +36,13 @@ interface GalleryGridImageProps {
 
 function GalleryGrid(props: GalleryGridProps) {
 	return (
-		<SimpleGrid spacing={props.gap || 'md'} cols={2} style={props.style}>
+		<Grid gutter={props.gap || 'md'} style={props.style}>
 			{props.images.map((i, index) => (
-				<GalleryGridImage {...i} key={index} showTooltipOnHover={props.showTooltipOnHover} />
+				<GridCol span={6} key={`g_i_${i}_${i.name?.slice(0, 10) || 'none'}`}>
+					<GalleryGridImage {...i} showTooltipOnHover={props.showTooltipOnHover} />
+				</GridCol>
 			))}
-		</SimpleGrid>
+		</Grid>
 	);
 }
 
@@ -58,6 +69,7 @@ export function GalleryGridImage(i: GalleryGridImageProps) {
 					onClick={i.onClick}
 					className={i.href && 'hover-border'}
 					blurDataURL={i.hash}
+					priority={false}
 				>
 					<div
 						ref={ref}

src/pages/gallery.tsx

@@ -1,13 +1,13 @@
 import { Box, Container, Group, Image, Modal, Pagination } from '@mantine/core';
 import GalleryGrid, { GalleryGridImage } from '../components/GalleryGrid';
 
-import { GalleryImage } from '../components/Gallery';
 import { NextPage } from 'next';
-import Page from '../components/Page';
-import fetcher from '../utils/Fetcher';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { GalleryImage } from '../components/Gallery';
+import Page from '../components/Page';
+import fetcher from '../utils/Fetcher';
 
 const MePage: NextPage = ({ data }: any) => {
 	const [activePage, setPage] = useState(1);
@@ -68,7 +68,7 @@ const MePage: NextPage = ({ data }: any) => {
 									(a: any, b: any) =>
 										new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
 								)
-								.slice(activePage * 100 - 100, activePage * 100)
+								.slice(activePage * 20 - 20, activePage * 20)
 								.map((d: any) => ({
 									name: d?.title,
 									src: `https://cdn.buildtheearth.net/uploads/${d?.image?.name}`,
@@ -79,7 +79,7 @@ const MePage: NextPage = ({ data }: any) => {
 										logo: d?.buildTeam.icon,
 									},
 									hash:
-										d?.hash ||
+										d?.image?.hash ||
 										'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj0NE3+g8AAqUBjTCztj4AAAAASUVORK5CYII=',
 									onClick: () => setFocus(d?.image?.name),
 								})) || [{}]
@@ -90,7 +90,7 @@ const MePage: NextPage = ({ data }: any) => {
 				<Group justify="center" pt="md">
 					<Pagination
 						my="md"
-						total={Math.floor(data.length / 100)}
+						total={Math.ceil(data.length / 20)}
 						radius="xs"
 						value={activePage}
 						onChange={setPage}