Fix project card flash when creating new project

Fix stale files count when returning to home page

Author: microbit-robert

src/homepage/HomePage.tsx

@@ -5,6 +5,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Heading } from "@chakra-ui/react";
+import { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useProjects } from "../project/projects-hooks";
 import { useSettings } from "../settings/settings";
@@ -26,10 +27,16 @@ const numCardsDisplayed = 10;
 const HomePage = () => {
   const intl = useIntl();
   const [{ languageId }] = useSettings();
-  const { projects } = useProjects();
+  const { projects, refresh } = useProjects();
   const { handleCreate, handleOpen, handleRenameDuplicate, handleDelete } =
     useProjectCardActions("home");
 
+  // Revalidate the list whenever the home page is shown (e.g. returning from
+  // the editor after adding a file, or after creating a project).
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
   const projectCards: JSX.Element[] = [
     <NewProjectCard key="new-project" onClick={handleCreate} />,
     ...projects.slice(0, numCardsDisplayed).map((project) => (

src/homepage/ProjectsPage.tsx

@@ -57,10 +57,15 @@ const searchScore = (project: ProjectDataWithFiles, terms: string[]): number =>
 };
 
 const ProjectsPage = () => {
-  const { projects, loading } = useProjects();
+  const { projects, loading, refresh } = useProjects();
   const { handleOpen, handleRenameDuplicate, handleDelete, handleDeleteMany } =
     useProjectCardActions("projects");
 
+  // Revalidate the list whenever the projects page is shown.
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
   const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
   const [query, setQuery] = useState("");
   const [orderByField, setOrderByField] = useState<OrderByField>("timestamp");

src/project/projects-hooks.tsx

@@ -151,14 +151,16 @@ export const ProjectsProvider = ({ children }: { children: ReactNode }) => {
       await projectsDb.createProject({ id, name, timestamp: Date.now() }, files);
       setCurrent(id);
       await loadIntoFs(id, name, files);
-      await refresh();
+      // No refresh here: we navigate straight to the editor, and refreshing the
+      // list would flash the new card onto the home page first. The list is
+      // revalidated when the home/projects page is next shown.
       postProjectSync({
         type: ProjectSyncMessageType.ReloadProject,
         projectIds: [id],
       });
       return id;
     },
-    [loadIntoFs, refresh, setCurrent]
+    [loadIntoFs, setCurrent]
   );
 
   const importProject = useCallback(
@@ -193,7 +195,8 @@ export const ProjectsProvider = ({ children }: { children: ReactNode }) => {
           name: pythonProject.projectName,
           files: pythonProject.files,
         };
-        await refresh();
+        // No refresh here: we navigate straight to the editor (the list is
+        // revalidated when the home/projects page is next shown).
         postProjectSync({
           type: ProjectSyncMessageType.ReloadProject,
           projectIds: [id],
@@ -203,7 +206,7 @@ export const ProjectsProvider = ({ children }: { children: ReactNode }) => {
         setImporting(false);
       }
     },
-    [fs, refresh, setCurrent]
+    [fs, setCurrent]
   );
 
   const openProject = useCallback(