I am trying to create a gdpr wrapper component for streamlit. Its usage looks like

if gdpr_wrapper():
    st.write('deferred content')

If a user accepts some terms, the deferred content is shown and the original confirm dialog should be hidden.

I am able to hide my confirm dialog:

However, the iframe that is used to show the gdpr_wrapper keeps its original size.

I tried to use Streamlit.setFrameHeight() in my _accept() method to trigger an update of the size of the iframe, once the confirm dialog has been hidden. However, that did not work.

I also tried to set explicit heights, for example Streamlit.setFrameHeight(0). That seems to end up in an infinite loop and causes my component to flicker.

=> How to correctly set the height for the iframe of my custom component to zero or hide it completely, so that I do not have extra vertical space?

import {
  Streamlit,
  StreamlitComponentBase,
  withStreamlitConnection,
} from 'streamlit-component-lib';
import React, { ReactNode } from 'react';

class GdprWrapper extends StreamlitComponentBase {
  public render(): ReactNode {
    const args = this.props.args;
    const cookieId = args['cookie_id'];
   
    Streamlit.setComponentValue(false);
    
    view = this._preview(args);
    //Streamlit.setFrameHeight(300);
    
    return view;
  }

  _accept() {
    this._hidePreviewContainer();
    Streamlit.setComponentValue(true);
    //Streamlit.setFrameHeight();
    //Streamlit.setFrameHeight(0);
    console.log("accepted");
  }

  _hidePreviewContainer() {
    const container = document.querySelector < HTMLElement > ('.gdpr-container-centered');
    container.style.visibility = 'hidden';
    container.style.height = '0';
    container.style.overflow = '0';
  }

  _preview(args) {
    const imagePath = args['image_path'];
    const description = args['description'];
    const acceptLabel = args['accept_label'];
    const rememberLabel = args['remember_label'];
    const cookieId = args['cookie_id'];
    return (
      <div className="gdpr-container-centered">
        <img className="gdpr-image" src={imagePath} alt="" />
        <div className="gdpr-shadow"></div>
        <div className="gdpr-description" dangerouslySetInnerHTML={{ __html: description }}></div>
        <div className="gdpr-button-container">
          <button className="gdpr-accept-button" onClick={() => this._accept()}>{acceptLabel}</button>
          <button className="gdpr-remember-button" onClick={() => this._acceptAndRemember(cookieId)}>{rememberLabel}</button>
        </div>
      </div>
    )
  }

  //...
}

Related:

https://discuss.streamlit.io/t/disqus-integration/3170/6

https://github.com/streamlit/streamlit/issues/7376