Refine photo thumb loading animation

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', {

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';
 

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" />

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)' },