Fork me on GitHub

Hi everybody! I hope it's ok if I ask a re-frame question here. I am currently designing an admin console to manage various settings of an app and would like to lazy-load each admin section and keep things modular if possible. However, I am really struggling to find much about lazy loading re-frame components on the web so I wondered if anyone had any ideas or pointers to where I can find out more or lazy loading approaches to investigate for re-frame, or how best to hook into Reacts lazy loading tools if possible?

AJ Jaro13:01:46

I’ve used two things before to solve this depending on your specific implementation. One is Day8 Async Flow based on a particular route/event, load some more data. The other is more basic in that when an event, like on-click occurs, kick off a reg-event-fx handle to run and fetch the data as needed. The way I could see this running in the description you provided is when a user might click to expand a given section or maybe even clicking a particular tab. In either way, you’re only loading the data when it’s needed and you don’t need to load everything for the initial page load


I just want to avoid loading huge chunks of javascript for parts of the admin console that aren't being used as with time each console might get pretty big


hmmn, perhaps shadow.cljs modules might be what i'm looking for.

🎯 4

@chrisemerson2007 re-frame beginner here (please take my advice with a grain of salt). I accomplish lazy loading in a very rudimentary way because I don't know any lazy loading components. What I do is very simple, I simply fetch the data the 1st time a section is displayed and show a loading indicator or placeholder until the data becomes available. I think this can easily be turned into a reusable component.


Looking at shadow.cljs modules will probably help. In a non-cljs project I'm working on we use for specific components (like big pictures) and it seems to be fine. I didn't configure it so there may be a bunch of babel stuff that's breaking the code up in a similar way that shadow.cljs modules would. React has also added a lazy function for this. Again, not sure if this will work with cljs since we don't use the same import semantics.

❤️ 8

cheers for the suggestions. I think for my use case the shadow modules should suffice. It allows you to structure code into modules, have dependencies between modules and access some module loader functions in cljs if you want more fine grained control.


it should help to avoid loading large amounts of js for admin screens that aren't being used


might write a blog entry on it when I get my head around it


the react lazy stuff is interesting too, I wonder how easy it would be to utilise it


Probably not as easy as shadow.cljs. I've never seen them used with reagent before. It would be interesting to see a small comparison between it and the built in shadow-cljs code modules


you would use react.lazy along with modules to lazy load the component you want


here’s an example from thheller (shadow-cljs author) using reagent, react.lazy and shadow.lazy: