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 the accept method to trigger an update of the size of the iframe once the confirm dialog is 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'];

    const isPermanentlyAccepted = this._getCookie(cookieId);

    let view;
    if (isPermanentlyAccepted){
      Streamlit.setComponentValue(true);
      view = this._withdraw_view(args);
      //Streamlit.setFrameHeight(20);
    } else {
      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