chore: stop loading changelog on every character (#57)

Author: deepnimma

public/changelog.json

@@ -7,7 +7,8 @@
         "Fix release date ordering button.",
         "Add stamps for 1st edition and reverse holo cards.",
         "Fix cards with non numeric card numbers not showing up in the grid.",
-        "Fix cards not loading properly when there are too many on the screen."
+        "Fix cards not loading properly when there are too many on the screen.",
+        "Improve file loading performance."
       ]
     },
     {

src/hooks/useAppEffects.ts

@@ -1,26 +1,43 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import type { ChangelogEntry } from '../lib/types';
 import { placeholderWords } from '../lib/constants';
 
+const CACHE_KEY = 'changelogData';
+const CACHE_DURATION = 6 * 60 * 60 * 1000; // 6 hours
+
 export const useAppEffects = (query: string) => {
     const [showScrollButton, setShowScrollButton] = useState(false);
     const [isChangelogOpen, setIsChangelogOpen] = useState(false);
     const [changelogData, setChangelogData] = useState<ChangelogEntry[]>([]);
     const [placeholderIndex, setPlaceholderIndex] = useState(0);
 
-    useEffect(() => {
-        const fetchChangelog = async () => {
-            try {
-                const response = await fetch('/changelog.json');
-                const data = await response.json();
+    const fetchChangelog = useCallback(async () => {
+        const cachedData = localStorage.getItem(CACHE_KEY);
+        if (cachedData) {
+            const { timestamp, data } = JSON.parse(cachedData);
+            if (Date.now() - timestamp < CACHE_DURATION) {
                 setChangelogData(data);
-            } catch (error) {
-                console.error("Error fetching changelog:", error);
+                return;
             }
-        };
+        }
 
-        fetchChangelog();
+        try {
+            const response = await fetch('/changelog.json');
+            const data = await response.json();
+            setChangelogData(data);
+            localStorage.setItem(CACHE_KEY, JSON.stringify({ timestamp: Date.now(), data }));
+        } catch (error) {
+            console.error("Error fetching changelog:", error);
+        }
+    }, []);
 
+    useEffect(() => {
+        if (isChangelogOpen && changelogData.length === 0) {
+            fetchChangelog();
+        }
+    }, [isChangelogOpen, changelogData, fetchChangelog]);
+
+    useEffect(() => {
         const handleScroll = () => {
             setShowScrollButton(window.scrollY > 300);
         };