message: fix(techdocs): cleaned up useEffect in Reader
diff: @@ -77,13 +77,16 @@ export const Reader = () => {
  const state = useFetch(`${normalizedUrl}index.html`);
  React.useEffect(() => {
  - const divElement = shadowDomRef.current;
  - if (
  - divElement?.shadowRoot &&
  - state.value &&
  - !(state.value instanceof Error)
  - ) {
  - const transformedElement = transformer(state.value, [
  + if (!shadowRoot) {
  + return; // Shadow DOM isn't ready
  + }
  +
  + if (state.loading) {
  + return; // Page isn't ready
  + }
  +
  + // Pre-render
  + const transformedElement = transformer(state.value as string, [
  addBaseUrl({
  docStorageURL,
  componentId,
  @@ -102,16 +105,22 @@ export const Reader = () => {
  removeMkdocsHeader(),
  ]);
  - divElement.shadowRoot.innerHTML = '';
  + if (!transformedElement) {
  + return; // An unexpected error occurred
  + }
  - if (transformedElement) {
  - divElement.shadowRoot.appendChild(transformedElement);
  - transformer(divElement.shadowRoot.children[0], [
  + Array.from(shadowRoot.children).forEach(child =>
  + shadowRoot.removeChild(child),
  + );
  + shadowRoot.appendChild(transformedElement);
  +
  + // Post-render
  + transformer(shadowRoot.children[0], [
  dom => {
  setTimeout(() => {
  if (window.location.hash) {
  const hash = window.location.hash.slice(1);
  - divElement.shadowRoot?.getElementById(hash)?.scrollIntoView();
  + shadowRoot?.getElementById(hash)?.scrollIntoView();
  }
  }, 200);
  return dom;
  @@ -121,22 +130,18 @@ export const Reader = () => {
  const parsedUrl = new URL(url);
  navigate(`${parsedUrl.pathname}${parsedUrl.hash}`);
  - divElement.shadowRoot
  - ?.querySelector(parsedUrl.hash)
  - ?.scrollIntoView();
  + shadowRoot?.querySelector(parsedUrl.hash)?.scrollIntoView();
  },
  }),
  ]);
  - }
  - }
  - }, [shadowDomRef, state, componentId, path, navigate]);
  + }, [componentId, path, shadowRoot, state]); // eslint-disable-line react-hooks/exhaustive-deps
  if (state.value instanceof Error) return <TechDocsNotFound />;
  return (
  <>
  <TechDocsPageWrapper title={componentId} subtitle={componentId}>
  - <div ref={shadowDomRef} />
  + <div ref={ref} />
  </TechDocsPageWrapper>
  </>
  );
  