feat: adds blur placeholders to images

src/components/atoms/PortfolioItem/PortfolioItem.tsx

@@ -1,8 +1,9 @@
-import { IPortfolioItem } from '@Types';
 import { FC } from 'react';
-import { StyledPortfolioItem } from './styles';
 import Image from 'next/image';
+import { IPortfolioItem } from '@Types';
 import Link from 'next/link';
+import { StyledPortfolioItem } from './styles';
+import { shimmer } from 'Utils/shimmer';
 
 export interface PortfolioItemProps {
 	item: IPortfolioItem;
@@ -21,6 +22,8 @@ const PortfolioItem: FC<PortfolioItemProps> = ({ item }) => {
 						height={1080}
 						objectFit="cover"
 						alt={title}
+						placeholder="blur"
+						blurDataURL={shimmer(1920, 1080)}
 					/>
 				</a>
 			</Link>

src/components/atoms/ThemeToggle/ThemeToggle.tsx

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { StyledThemeToggle } from './styles';
 
 import { useDispatch, useSelector } from 'react-redux';
@@ -8,7 +7,7 @@ import Light from 'Public/assets/light.svg';
 import Dark from 'Public/assets/dark.svg';
 import { setTheme } from 'Redux/actions/theme';
 
-const ThemeToggle: FC = () => {
+const ThemeToggle = () => {
 	const theme = useSelector(getTheme);
 	const dispatch = useDispatch();
 

src/pages/blog/[slug].tsx

@@ -8,13 +8,21 @@ import styled from 'styled-components';
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
 import { SeoHead } from 'Atoms/SeoHead';
+import { shimmer } from 'Utils/shimmer';
 
 export default function BlogPost({ post, mdxSource }: any) {
 	const { title, description, date, tags } = post;
 
 	const components = {
 		img: (props: any) => (
-			<Image {...props} width={1920} height={1080} objectFit="cover" />
+			<Image
+				{...props}
+				width={1920}
+				height={1080}
+				objectFit="cover"
+				placeholder="blur"
+				blurDataURL={shimmer(1920, 1080)}
+			/>
 		),
 		ul: (props: any) => <List {...props} />,
 	};

src/pages/portfolio/[slug].tsx

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
 import { getAllDocuments, getBySlug } from 'Utils/api';
-import { serialize } from 'next-mdx-remote/serialize';
-import { MDXRemote } from 'next-mdx-remote';
 import Image from 'next/image';
+import { MDXRemote } from 'next-mdx-remote';
+import { serialize } from 'next-mdx-remote/serialize';
+import { shimmer } from 'Utils/shimmer';
+import styled from 'styled-components';
 
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
@@ -33,6 +34,8 @@ export default function BlogPost({ item, mdxSource }: any) {
 					height={1080}
 					objectFit="cover"
 					alt={`Screenshot of ${title}`}
+					placeholder="blur"
+					blurDataURL={shimmer(1920, 1080)}
 				/>{' '}
 				<Headline>{title}</Headline>
 				<h3>{type}</h3>

src/pages/portfolio/index.tsx

@@ -16,7 +16,7 @@ export default function Blog({ portfolioItems }: any) {
 			<Container>
 				<Headline>Portfolio</Headline>
 				{portfolioItems.map((item: any) => (
-					<PortfolioItem item={item} />
+					<PortfolioItem item={item} key={item.slug} />
 				))}
 			</Container>
 		</>

src/pages/uses.tsx

@@ -1,8 +1,11 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+
 import { Container } from 'Atoms/Container';
 import { List } from 'Atoms/List';
 import { SeoHead } from 'Atoms/SeoHead';
-import Image from 'next/image';
-import styled from 'styled-components';
+
+import desk from 'Public/assets/desk.jpg';
 
 function Home() {
 	return (
@@ -21,10 +24,11 @@ function Home() {
 					2021.
 				</p>
 				<Image
-					src="/assets/desk.jpg"
+					src={desk}
 					width={1920}
 					height={1080}
 					alt="A photo of my desk"
+					placeholder="blur"
 				/>
 				<h3>Computer & Hardware</h3>
 				<List>

src/utils/shimmer.ts

@@ -0,0 +1,22 @@
+const shimmerSvg = (width: number, height: number) => `
+  <svg width="${width}" height="${height}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="rgba(100, 100, 100, 0.2)" offset="20%" />
+        <stop stop-color="rgba(100, 100, 100, 0.5)" offset="50%" />
+        <stop stop-color="rgba(100, 100, 100, 0.2)" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${width}" height="${height}" fill="rgba(100, 100, 100, 0.2)" />
+    <rect id="r" width="${width}" height="${height}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${width}" to="${width}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+const toBase64 = (str: string) =>
+	typeof window === 'undefined'
+		? Buffer.from(str).toString('base64')
+		: window.btoa(str);
+
+export const shimmer = (width: number, height: number) => {
+	return `data:image/svg+xml;base64,${toBase64(shimmerSvg(width, height))}`;
+};