I’m not too familiar with CardConnect however, you should be able to preload an iframe by appending the following link element to the head of your document:
<link rel="preload" href="https://cardconnect.com/iframe.html" as="document">
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
You can show a loader by default and remove it on load of iframe.
<iframe onLoad={funtion to remove loader} />
In my case, I need to display a credit card form, and use an iframe to load the credit card field from CardConnect (a secure external site). The problem is that once I display that form in a modal, it takes about a half second to load that iframe. I would like to pre render/load the iframe so once it is ready to display, it looks like it loaded immediately.
I tried techniques from this link with no luck: https://hackernoon.com/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d
I also tried memoizing the iframe, rendering it in a hidden div earlier in the app and calling on it again, but also no luck, it’s loaded twice.
Do you find any solution for this?
Unfortunately not, it’s been on the back burner for a while now. I’ll update this question if I ever find a solution.
This does not answer the question. I want it to be loaded before it is even visible.