use cache to initially show directory listings in more cases

Author: williamstein

src/packages/frontend/project/explorer/file-listing/file-listing.tsx

@@ -279,8 +279,7 @@ export const FileListing: React.FC<Props> = ({
         >
           <FormattedMessage
             id="project.explorer.file-listing.stale-warning"
-            defaultMessage={`Showing stale directory listing
-              {is_missing, select, true {<b>missing {missing} files</b>} other {}}.
+            defaultMessage={`Showing stale directory listing{is_missing, select, true {<b> missing {missing} files</b>} other {}}.
               To update the directory listing <a>start this project</a>.`}
             values={{
               is_missing: missing > 0,

src/packages/frontend/project_actions.ts

@@ -1496,7 +1496,8 @@ export class ProjectActions extends Actions<ProjectStoreState> {
       page_number: 0,
       most_recent_file_click: undefined,
     });
-    this.fetch_directory_listing({ path });
+
+    store.get_listings().watch(path, true);
   };
 
   setComputeServerId = (compute_server_id: number) => {
@@ -1556,9 +1557,9 @@ export class ProjectActions extends Actions<ProjectStoreState> {
 
   // Update the directory listing cache for the given path.
   // Uses current path if path not provided.
-  async fetch_directory_listing(opts?): Promise<void> {
+  fetch_directory_listing = async (opts?): Promise<void> => {
     await fetchDirectoryListing(this, opts);
-  }
+  };
 
   public async fetch_directory_listing_directly(
     path: string,

src/packages/frontend/project_store.ts

@@ -616,33 +616,45 @@ export class ProjectStore extends Store<ProjectStoreState> {
         let directory_listings_for_server =
           this.getIn(["directory_listings", computeServerId]) ??
           immutable.Map();
+
+        const missing: string[] = [];
         for (const path of paths) {
-          let files;
           if (listingsTable.getMissing(path)) {
+            missing.push(path);
+          }
+          const files = await listingsTable.getForStore(path);
+          directory_listings_for_server = directory_listings_for_server.set(
+            path,
+            files,
+          );
+        }
+        const f = () => {
+          const actions = redux.getProjectActions(this.project_id);
+          const directory_listings = this.get("directory_listings").set(
+            computeServerId,
+            directory_listings_for_server,
+          );
+          actions.setState({ directory_listings });
+        };
+        f();
+
+        if (missing.length > 0) {
+          for (const path of missing) {
             try {
-              files = immutable.fromJS(
+              const files = immutable.fromJS(
                 await listingsTable.getListingDirectly(path),
               );
-            } catch (err) {
-              console.log(
-                `WARNING: temporary problem getting directory listing -- ${err}`,
+              directory_listings_for_server = directory_listings_for_server.set(
+                path,
+                files,
               );
-              files = await listingsTable.getForStore(path);
+            } catch {
+              // happens if e.g., the project is not running
+              continue;
             }
-          } else {
-            files = await listingsTable.getForStore(path);
           }
-          directory_listings_for_server = directory_listings_for_server.set(
-            path,
-            files,
-          );
+          f();
         }
-        const actions = redux.getProjectActions(this.project_id);
-        const directory_listings = this.get("directory_listings").set(
-          computeServerId,
-          directory_listings_for_server,
-        );
-        actions.setState({ directory_listings });
       });
     }
     if (this.listings[computeServerId] == null) {