Open oyeanuj opened 6 years ago
Hey @oyeanuj this sounds interesting. Have you come across some use-cases where this would have been nice to have? Please share if so!
Absolutely. A couple of places where I have it is say hovering over a user's avatar, I want to show the summarized user profile but that might mean image or video loading or XHR calls. Ideally, I'd delay that until the user asks for it rather than loading all the media or XHR calls all at once.
@oyeanuj Can you provide a minimal motivating code sample? I don't understand why we cannot simply show a loading state in the popover body, or content, depending on the prop values of a wrapper component.
-- edit I've been out of the loop re rendering advancements. For example I still need to catch up on the concept of render props. Feel free to enlighten me if something is relevant to this issue.
@jasonkuhrt no worries. it is basically the render prop pattern. The render prop pattern tends to use the render
as the prop literally whereas this library could continue using the body
prop.
So instead, of
<Popover body = { this.renderUserInfo() } >PopoverTrigger</Popover>
and have the body be executed on every re-render or pre-maturely and then have to maintain state to know when it is actually really being displayed.
one could do:
<Popover body = { this.renderUserInfo }> PopoverTrigger</Popover>
and the function is only called (if at all) when the Popover is actually triggered. In the Popover
code, the only change would be to see if body
is a function, in which case you render the called function instead of just rendering the body
like it happens today.
Thoughts?
Hi @jasonkuhrt, this is a relatively small proposal compared to all the other big things in line for this library.
I was wondering if you've considered having the
body
prop be a function in addition to being an element or node. This gives the added advantage that those aren't rendered until the body is needed (especially when they require an async request).Thank you for all your work on this library!