improve tile load time

- may need to manually call refresh() for state change

.gitignore

@@ -30,4 +30,6 @@ yarn-error.log*
 .env.production.local
 
 # Firebase cache
-.firebase/
+.firebase/
+
+.vscode/launch.json

app/components/Dashboard.js

@@ -40,17 +40,16 @@ const Dashboard = () => {
   // }, [formattedMatches])
 
   // Fuzzy search
-  const fuse = useMemo(
-    () =>
-      new Fuse(formattedMatches, {
-        keys: searchableProperties,
-        threshold: 0.3
-      }),
-    [formattedMatches]
-  )
+  const fuse = useMemo(() => {
+    if (!formattedMatches.length) return null
+    return new Fuse(formattedMatches, {
+      keys: searchableProperties,
+      threshold: 0.3
+    })
+  }, [formattedMatches])
 
   const filteredMatchSets = useMemo(() => {
-    if (!searchTerm) return []
+    if (!searchTerm || !fuse) return []
     const result = fuse.search(searchTerm).map((result) => {
       const match = result.item
       return `${match.matchDate}#${match.teams.opponentTeam}`

app/components/DataProvider.js

@@ -89,28 +89,24 @@ export const DataProvider = ({ children }) => {
     [fetchMatches, matches]
   )
 
-  const createMatch = useCallback(
-    async (collectionName, newMatchData) => {
-      try {
-        const newMatch = {
-          id: 'temp-id',
-          collection: collectionName,
-          ...newMatchData
-        }
-
-        setMatches((prevMatches) => [...prevMatches, newMatch])
-
-        const colRef = collection(db, collectionName)
-        await addDoc(colRef, newMatchData)
-
-        await fetchMatches()
-      } catch (err) {
-        setError(err)
-        console.error('Error creating new match:', err)
+  const createMatch = useCallback(async (collectionName, newMatchData) => {
+    try {
+      const newMatch = {
+        id: 'temp-id',
+        collection: collectionName,
+        ...newMatchData
       }
-    },
-    [fetchMatches]
-  )
+      setMatches((prevMatches) => [...prevMatches, newMatch])
+
+      // Actual Firestore addition
+      const colRef = collection(db, collectionName)
+      await addDoc(colRef, newMatchData)
+      await fetchMatches()
+    } catch (err) {
+      setError(err)
+      console.error('Error creating new match:', err)
+    }
+  }, [])
 
   const fetchLogos = useCallback(async () => {
     const storedLogos = localStorage.getItem('teamLogos')
@@ -172,9 +168,6 @@ export const useData = () => {
   const { matches, logos, loading, error, refresh, updateMatch, createMatch } =
     context
 
-  useEffect(() => {
-    refresh()
-  }, [refresh])
-
+  // Optionally keep `refresh` available for manual use in components
   return { matches, logos, loading, error, refresh, updateMatch, createMatch }
 }