Best data-loading strategy for modal?

So I’m using React, and following the Meteor guide almost to the letter in terms of using createContainer to load in data for my pages, react-router for routing, etc.

But I have a situation now where I am unsure what to do!

My product edit page allows my users to (not surprisingly) edit the product’s field values. Now products for me can be pretty large in themselves, they have lots of text and I have a system whereby images can be “linked” to product fields (it saves uploading the same image 20 times). So when it comes to editing a product I need all the product data and at the very least the linked field items that it currently uses (ie. an image of a banana). So I use a publishComposite to get the product and all related fields.

However, as I said, this is an edit page, so there needs to be the ability for a user to click on a “Select Image” button on an existing image field, and change it to any of the others available… The images, that I as-yet haven’t loaded!

So ideally, I’d only like to load ALL the available images, etc. when a user clicks on a button that pops up a “selection modal” which can display a loading symbol while it loads, etc.

Now I know that createContainer is really designed for use in Page routing, but can I use it in this case? If so, how would I go about passing an onSelected event handler to the ImageSelector via a container? Is this even the best way to do it? I know I could load ALL the images right from the off, but it’ll degrade user experience as they’ll have to wait longer for something that they may not need.

The example in the guide uses it for a page, but it’s perfectly reasonable to put a container around any component, for example the modal. Sounds like that’s the best approach in this case!

And without sounding stupid, I can pass a callback into the container, and then just forward it onto the Component… That’s all perfectly fine to do?

EDIT: Just tried all this and sure enough, it all works flawlessly.

1 Like