Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

screen shot 2018-01-09 at 4 58 07 pm

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!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

seans887commented, Jan 12, 2018

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.

espringcommented, Aug 26, 2019

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>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Show a loading indicator when an iframe is being loaded
Initially, the iframe will be hidden by setting the opacity to zero. On the other hand, the loading indicator could be displayed at...
Read more >
feedback onload a iframe sometime not work well
Sometimes, the spinner won't hide even though I see the page is correctly loaded and in the console, I cannot see any open...
Read more >
Hide Progress Indicator When IFrame is Loaded
The closeProgressIndicator function uses JQuery hide() function to make the progressIndicator invisible. Here is the animation of the effect:
Read more >
Show a loading indicator when an iframe is being loaded
This post demonstrates a common case where we show a loading indicator while an iframe is being loaded. It's always a good practice...
Read more >
It's time to lazy-load offscreen iframes! -
If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in most cases. iframes that aren't hidden...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found