Refresh gallery less aggressively.

lib/firebase.tsx

@@ -117,6 +117,7 @@ export const FirebaseGalleryProvider: React.FC<{}> = ({ children }) => {
   const [compositions, setCompositions] = useState<GalleryComposition[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | undefined>(undefined);
+  const [lastRefresh, setLastRefresh] = useState(0);
 
   const handleError = (e: Error) => {
     setIsLoading(false);
@@ -127,6 +128,7 @@ export const FirebaseGalleryProvider: React.FC<{}> = ({ children }) => {
     compositions,
     isLoading,
     error,
+    lastRefresh,
     refresh: useCallback(() => {
       if (!(appCtx && !isLoading)) return false;
 
@@ -134,6 +136,7 @@ export const FirebaseGalleryProvider: React.FC<{}> = ({ children }) => {
       setIsLoading(true);
       getDocs(getGalleryCollection(appCtx))
         .then((snapshot) => {
+          setLastRefresh(Date.now());
           setIsLoading(false);
           setCompositions(
             snapshot.docs.map((doc) => ({

lib/gallery-context.tsx

@@ -14,10 +14,12 @@ export interface GalleryContext {
   isLoading: boolean;
   error?: string;
   refresh(): boolean;
+  lastRefresh: number;
 }
 
 export const GalleryContext = React.createContext<GalleryContext>({
   compositions: [],
   isLoading: false,
   refresh: () => true,
+  lastRefresh: 0,
 });

lib/pages/gallery-page.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { GalleryComposition, GalleryContext } from "../gallery-context";
 import { Page } from "../page";
 import { createPageWithStateSearchParams } from "../page-with-shareable-state";
@@ -23,20 +23,17 @@ const GalleryCompositionView: React.FC<GalleryComposition> = (props) => {
 
 export const GalleryPage: React.FC<{}> = () => {
   const ctx = useContext(GalleryContext);
-  const [refreshed, setRefreshed] = useState(false);
 
   useEffect(() => {
-    if (!refreshed) {
+    if (ctx.lastRefresh === 0) {
-      if (ctx.refresh()) {
+      ctx.refresh();
-        setRefreshed(true);
-      }
     }
-  }, [ctx, refreshed]);
+  }, [ctx]);
 
   return (
     <Page title="Gallery!">
       <div className="sidebar">
-        <button onClick={() => setRefreshed(false)} disabled={ctx.isLoading}>
+        <button onClick={ctx.refresh} disabled={ctx.isLoading}>
           {ctx.isLoading ? "Loading\u2026" : "Refresh"}
         </button>
         {ctx.error && <p className="error">{ctx.error}</p>}