Lazy-loading folder structure / creating subfolders on demand

[bwalocha]

Awesome project – thank you for your work!

I have been using this project for a while and now I am trying to display a folder structure received from my ESP32 via an API.

Current behavior

At the moment, everything works when I receive the entire folder tree from the API and create the full structure in a single load step. However, this approach is not efficient for larger structures.

Problem

What I would like to achieve instead is lazy loading:

• when the user opens the root folder → load only its direct subfolders and files
• when the user opens a subfolder → load its content on demand

I couldn’t find a way to dynamically create subfolders when a folder is opened.

Question

Is there a way to:

• listen for a folder-open event, and
• create / load subfolders of that folder dynamically?

If not, is there any recommended workaround for this use case?

Any suggestions would be really welcome.
Greetings to the author!

[Prozilla]

Thanks for your feedback! There’s not currently an event for when a file or folder opens, but when that’s added, you can use on() to listen for open events. You can then create new folders using createFolders().

But this is something that might also be useful for other users and should therefore probably be built into the library. I think the best way to achieve this is to have a callback function as a property of folders that gets called when the folder opens.

Would you be willing to add this yourself via a PR?

[bwalocha]

Thanks for the hints! I will try to create PR. Challenge accepted :)

[Prozilla]

Good luck! You should only have to edit virtualFolder.ts (unless you would also like to add the open event, which should be added to the base class).

Edit: There’s also a guide for self-hosting which could be useful for setting up the project in your local environment.

[bwalocha]

Investigation results:

• adding this.emit(VirtualBase.EVENT_NAMES.open); in VirtualFolder.open is not enought - the method is called only when I click "open" from context menu of the desktop folder
• adding additional emit in VirtualFolder.navigate causes another problems - the navigate is called multiple times after double click on the desktop folder (6-8) and using context menu "open in Files" - I wonder why this process is different from "open" form context menu
• contxt menu of the desktop folder "open in commands" opens the file explorer - bug

What am I doing wrong?

[Prozilla]

I think it would be better to avoid events for this and instead adding a new property that holds a function that populates the folder. Then I would call that function whenever getFiles() or getFolders() gets called, before returning a result.

If the function is asynchronous, that complicates things a bit. For now I think a good workaround would be to let the getters return immediately (still calling that function, but returning without awaiting it), and emitting the UPDATE event when the promise is completed. (That way dependents like the file explorer can be notified about the changes and can update their display.)

If you still want to implement the OPEN event, you can still do that, but I wouldn’t use events to implement this feature as it can be achieved without them, and I believe it’s better to avoid events/listeners when possible. Also if you do decide to implement the event, please pull before doing so to make your branch up-to-date, as I have rewritten the event system (sorry).

Besides that, if you encounter any other problems or bugs while doing this, please create a separate issue so we can track them there. I think this excessive calling of navigate() is worth looking into.

Thank you for your contributions and best of luck!

[Prozilla]

Now that I’ve had some more time to think about it, I think this should be a separate class that extends the VirtualFolder class and overrides these methods.