Html Panel is sometimes empty

[talkjs]

Html Panel is sometimes empty

[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>
  );
};