Instead of importing Tilt from Tilt here -- where we are importing our vanilla-tilt library and the Tilt component itself -- we can lazy-load that Tilt component itself using React.lazy. We'll pass a function that returns a dynamic import for Tilt. We're going to assign that to Tilt.
Then we can get rid of this import. We're going to render the Tilt component that React.lazy gives us. This relies on the Suspense feature in React. We need to have this Suspense component rendered somewhere above where this Tilt lazy-loaded component is going to be rendered.
I'm going to take that Suspense. We'll render it right above the Tilt. We'll give it a fallback value of a div that says, "Loading."
This can be a lot more useful if you're lazy-loading bigger libraries like D3. Let's go ahead and experiment here. I'm going to refresh. I'll switch this to a slow connection.
Then if I click on "Show tilt," it shows that loading state fallback. It renders Vanilla Tilt when it's loaded.
In review, to make this work, we simply remove the import of Tilt and replaced it with a React.lazy call using a dynamic import. Then we rendered Tilt assuming that it was actually already loaded just as we had before, making no changes to how we're using that component.
But then we added the Suspense component from React and rendered that with a fallback value for what it should show while it's busy loading the Tilt component. I should note also that once we've loaded and rendered this one time, any subsequent renders of the Tilt component will render immediately because it's already been loaded.