How to prevent iframe reload when switching tabs in React app embedding Sisense dashboard?

Hi Midhun_e,

I don't believe this exact question has been asked before, but there are some related approaches that may be helpful.

In general, it sounds like the iframe reload can be avoided by preserving the DOM element and simply toggling its visibility, rather than unmounting it during navigation.

One effective method is to use a higher-level component to manage the iframe's state, rendering it once and conditionally showing or hiding it based on route or tab state:

// IframeContainer.js general example
import React, { useRef, useEffect } from 'react';

const IframeContainer = ({ isVisible }) => {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (!iframeRef.current) {
      iframeRef.current = document.createElement('iframe');
      iframeRef.current.src = 'https://sisenseUrl.sisense.com';
      iframeRef.current.style.width = '100%';
      iframeRef.current.style.height = '100%';
      iframeRef.current.id = 'sisense-dashboard';
      document.getElementById('iframe-wrapper').appendChild(iframeRef.current);
    }
    iframeRef.current.style.display = isVisible ? 'block' : 'none';
  }, [isVisible]);

  return <div id="iframe-wrapper" style={{ width: '100%', height: '100%' }} />;
};

export default IframeContainer;

This component can be used with code such as this

<IframeContainer isVisible={currentTab === 'insights'} />

Alternatively, you can render the iframe once in a hidden container outside of the main routing view, and then control its visibility using CSS or React state. This ensures that the iframe remains mounted in the DOM across route changes:

<div id="persisted-iframes">
  <iframe
    id="sisense-dashboard"
    src="https://sisenseUrl.sisense.com"
    style={{ display: currentTab === 'insights' ? 'block' : 'none' }}
  />
</div>

Both these examples can be modified to fit your application.

As a much broader change, ComposeSDK can be used to "natively" use React code within your application to display Sisense widgets and dashboards, it is designed to natively integrate into a React application with React based code, without having to use iframes.