From 271aeb0bb41ad85dae5ba82d8739ce41bff9f040 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 20 Jan 2025 14:02:03 -0600
Subject: [PATCH] Refine photo thumb loading animation

---
 eslint.config.mjs         | 1 +
 next.config.ts            | 1 -
 src/photo/PhotoMedium.tsx | 3 ++-
 tailwind.config.js        | 6 ++++++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 9a536467..47a47718 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -14,6 +14,7 @@ const eslintConfig = [
     rules: {
       '@next/next/no-img-element': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
       'no-unused-expressions': ['warn'],
       '@typescript-eslint/no-unused-vars': [
         'warn', {
diff --git a/next.config.ts b/next.config.ts
index 62a91b49..c41d7549 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
 import type { NextConfig } from 'next';
 import { RemotePattern } from 'next/dist/shared/lib/image-config';
 
diff --git a/src/photo/PhotoMedium.tsx b/src/photo/PhotoMedium.tsx
index cd6feb0a..e67e744d 100644
--- a/src/photo/PhotoMedium.tsx
+++ b/src/photo/PhotoMedium.tsx
@@ -54,7 +54,8 @@ export default function PhotoMedium({
           {isLoading &&
             <div className={clsx(
               'absolute inset-0 flex items-center justify-center',
-              'text-white bg-black/25',
+              'text-white bg-black/25 backdrop-blur-sm',
+              'animate-fade-in',
               'z-10',
             )}>
               <Spinner size={20} color="text" />
diff --git a/tailwind.config.js b/tailwind.config.js
index f86a24d3..a728d01d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,12 +28,18 @@ module.exports = {
       animation: {
         'rotate-pulse':
           'rotate-pulse 0.75s linear infinite normal both running',
+        'fade-in':
+          'fade-in 0.5s linear',
         'hover-drift':
           'hover-drift 8s linear infinite',
         'hover-wobble':
           'hover-wobble 6s linear infinite normal both running',
       },
       keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
         'rotate-pulse': {
           '0%': { transform: 'rotate(0deg) scale(1)' },
           '50%': { transform: 'rotate(180deg) scale(0.8)' },