Loading spinner stays visible while iframe content is invisible, even after load

XComponent version: 6.0.35 React version: 15.5.4 Node version: v8.8.1

Expectation: Once the iframe content has been loaded from its URL, the default xcomponent loading spinner should disappear and only the iframe content should remain. What’s happening: When I load my xcomponent on the page, the loading spinner stays there forever and never displays the actual iframe content. This is despite the fact that the content has already loaded, which I confirmed by manually changing the CSS class of the loading spinner to hide it, while also changing the CSS class of the content to show it.

Note: The JS error notification you see on the right is for 1) a warning that React 16 will deprecate React.createClass, which apparently is being used by xcomponent, and 2) a 404 on an unrelated GET request. Neither should be influencing the iframe load, to my knowledge.

Description: I’m trying to render an xcomponent into a React application. For now, the iframe on the other side is simply a static HTML file with an <h1> in it. After reading the docs, I created the following component:

// components/AddCardFrame.js

import xcomponent from 'xcomponent';
import React from 'react';
import ReactDOM from 'react-dom';

const component = xcomponent.create({
    tag: 'add-card-frame',
    url: 'http://localhost:4321'
});

let AddCardFrame = component.driver('react', {
    React: React,
    ReactDOM: ReactDOM
});

export default AddCardFrame;

I’m using the React drivers to generate my component, which I am using elsewhere very simply:

// index.js
...
import AddCardFrame from '../components/AddCardFrame';
...
class Footer extends Component {
...
      render() {
         ...
         <AddCardFrame />
      }
}

After digging through the xcomponent source a bit, it seems as though the switchPrerender method may be the culprit somehow (not being triggered?), as it seems to be responsible for switching between the prerendered content and the actual content on load. Beyond that I’m pretty stuck though. Can provide more details as needed. Thanks!

[seans887]

We’ve figured this one out - it turned out we were not requiring the original xcomponent instance inside of the child iframe. I didn’t see this noted in the docs or the Medium article anywhere so we didn’t add it - but eventually a coworker noticed in the example React code that in the child iframe they had imported xcomponent and the original xcomponent instance (in the demo code this was login.js) in the child iframe as well as the parent. I’m assuming this is necessary to create the post-robot messaging bridge on both sides?

It would be ideal if it could be noted in the documentation that it’s necessary to require both xcomponent and the original xcomponent instance in the child iframe. Thank you.

[espring]

I have the same issue, and figured it out after I read @seans887’s reply many times…

The key point is that not only the parent page but also the child iframe page should include the xcomponent /zoid definition files!

Take a look at the example code : zoid / demo / frameworks / react /

• login.js ==> xcomponent definition

• index.html ==> parent page includes both framework.js and login.js

    <script src="../../../dist/zoid.frameworks.js"></script>
    <script src="./login.js"></script>

• login.html ==> client iframe page should include both framework.js and login.js

    <-- **Here is the key point** -->
    <script src="../../../dist/zoid.frameworks.js"></script>
    <script src="./login.js"></script>