Html Panel is sometimes empty

[lechinoix]

Hello,

I have been using the new HtmlPanel component, but I am encountering a weird issue that I cannot overcome. On loading, the htmlpanel iframe content is removed from the DOM for some reason, but React keeps its reference to the body element and keeps posting updates to the zombie element. Things that I noticed :

• When using mobile display (first conversation list, then conversation content), the html panel works like a charm
• When updating the component from my devserver, the panel appears and remains in the DOM

I suspect that it is something related to the load of the Inbox / Sesssion, but I cannot find an onLoad event to wait for on Inbox or Session.

Could you help me on that ? A debugging example can be found on https://staging.barooders.com (create account + go to chat)

[lechinoix]

If anyone is interested, I solved this issue like this :

import { HtmlPanel, Inbox as TalkJSInbox } from '@talkjs/react';
import { useEffect, useRef, useState } from 'react';
import { useInterval } from 'react-use';

const Inbox = () => {
  const [readyForPanel, setReadyForPanel] = useState(false);
  const canaryElRef = useRef<HTMLDivElement | null>(null);

  useInterval(() => {
    if (canaryElRef.current?.clientWidth === 0) {
      setReadyForPanel(false);
    }
  }, 1000);

  useEffect(() => {
    if (!readyForPanel) {
      window.setTimeout(() => setReadyForPanel(true), 1000);
    }
  }, [readyForPanel]);

  return (
    <TalkJSInbox>
      {readyForPanel && (
        <HtmlPanel url={`/chat-panel.html`}>
          <div ref={canaryElRef} />
          <p>Any content here</p>
        </HtmlPanel>
      )}
    </TalkJSInbox>
  );
};