Fix GIFs not loading in production (#72)

* Implement manual checking for gifs

* Document a new function

* Update yarn.lock

* Upgrade stylelint-config-sass-guidelines

* Add postcss as a dev dependency

* Satisfy reqs for latest sass-guidelines

src/components/leaderboard/LeaderboardRow/index.tsx

@@ -1,3 +1,4 @@
+import { isSrcAGif } from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import type { RefObject } from 'react';
@@ -37,6 +38,7 @@ const LeaderboardRow = ({
         quality={10}
         alt={`Profile picture for ${name}`}
         className={styles.profilePicture}
+        unoptimized={isSrcAGif(image)}
       />
       <div className={styles.nameRank}>
         <span className={styles.name}>

src/lib/utils.ts

@@ -70,3 +70,10 @@ export const getUserRank = (user: PublicProfile): string => {
 
   return ranks[index] ?? '';
 };
+
+/**
+ * Checks whether an image source is a gif
+ * @param src - source of the image
+ * @returns whether or not the source is a gif
+ */
+export const isSrcAGif = (src: string): boolean => /\.gif($|&)/.test(src);