Loading optimization
Unanswered
Alexandru posted this in #help-forum
Hello everyone! A little optimization question to clarify and solidify my app. What I have here is a command where items are displayed in a window upon hovering. Currently, the model card is marked as a client component (because I used a little bit of local storage).
Suppose now that this card can be a little bit expensive (or timely) to load. For example, it would get some data from the database or fetch some API regarding the connection strength of the model hovered.
Every time I browse through my command interface, all items are loaded as I hover over them. What would be the best approach to delay or lazy load these items only when the hover action is intentional, such as after hovering for 2 seconds?
Suppose now that this card can be a little bit expensive (or timely) to load. For example, it would get some data from the database or fetch some API regarding the connection strength of the model hovered.
Every time I browse through my command interface, all items are loaded as I hover over them. What would be the best approach to delay or lazy load these items only when the hover action is intentional, such as after hovering for 2 seconds?
onMouseEnter={() => setCardModel()}3 Replies
Guys, any suggestion?
@Alexandru Hello everyone! A little optimization question to clarify and solidify my app. What I have here is a command where items are displayed in a window upon hovering. Currently, the model card is marked as a client component (because I used a little bit of local storage).
Suppose now that this card can be a little bit expensive (or timely) to load. For example, it would get some data from the database or fetch some API regarding the connection strength of the model hovered.
Every time I browse through my command interface, all items are loaded as I hover over them. What would be the best approach to delay or lazy load these items only when the hover action is intentional, such as after hovering for 2 seconds?
`onMouseEnter={() => setCardModel()}`
const [fetchDataTimeout, setFetchDataTimeout] = useState(null);
<div
onMouseEnter={() => {
const timeout = setTimeout(() => {
// do stuff
}, 2000);
setFetchDataTimeout(2000);
}}
onMouseLeave={() => {
if (fetchDataTimeout) clearTimeout(fetchDataTimeout);
}}
>
...
</div>though why not just show the card on hover with a skeleton content and only fetch data after that skeleton has been up for 2 seconds? snappier that way