From 45a965476efb5eeb1ee7a1c257c602d2f3755b1d Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 7 Sep 2022 20:58:51 -0700
Subject: [PATCH] Use next/future/image component to optimize avatar images

---
 web/components/avatar.tsx |  6 +++++-
 web/next.config.js        | 10 +++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx
index 55cf3169..44c37128 100644
--- a/web/components/avatar.tsx
+++ b/web/components/avatar.tsx
@@ -2,6 +2,7 @@ import Router from 'next/router'
 import clsx from 'clsx'
 import { MouseEvent, useEffect, useState } from 'react'
 import { UserCircleIcon, UserIcon, UsersIcon } from '@heroicons/react/solid'
+import Image from 'next/future/image'
 
 export function Avatar(props: {
   username?: string
@@ -14,6 +15,7 @@ export function Avatar(props: {
   const [avatarUrl, setAvatarUrl] = useState(props.avatarUrl)
   useEffect(() => setAvatarUrl(props.avatarUrl), [props.avatarUrl])
   const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
+  const sizeInPx = s * 4
 
   const onClick =
     noLink && username
@@ -26,7 +28,9 @@ export function Avatar(props: {
   // there can be no avatar URL or username in the feed, we show a "submit comment"
   // item with a fake grey user circle guy even if you aren't signed in
   return avatarUrl ? (
-    <img
+    <Image
+      width={sizeInPx}
+      height={sizeInPx}
       className={clsx(
         'flex-shrink-0 rounded-full bg-white object-cover',
         `w-${s} h-${s}`,
diff --git a/web/next.config.js b/web/next.config.js
index e99a3081..5438d206 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -9,6 +9,9 @@ module.exports = {
   reactStrictMode: true,
   optimizeFonts: false,
   experimental: {
+    images: {
+      allowFutureImage: true,
+    },
     scrollRestoration: true,
     externalDir: true,
     modularizeImports: {
@@ -25,7 +28,12 @@ module.exports = {
     },
   },
   images: {
-    domains: ['lh3.googleusercontent.com', 'i.imgur.com'],
+    domains: [
+      'manifold.markets',
+      'lh3.googleusercontent.com',
+      'i.imgur.com',
+      'firebasestorage.googleapis.com',
+    ],
   },
   async redirects() {
     return [