From cdf8ca61118dfadd79b3af2d95adf682a0ba0922 Mon Sep 17 00:00:00 2001 From: Dominik Henneke Date: Fri, 15 Oct 2021 17:14:12 +0200 Subject: [PATCH] Only replace the shadow dom if the content is changed to avoid a flickering UI Signed-off-by: Dominik Henneke --- .changeset/techdocs-dull-glasses-decide.md | 5 +++++ plugins/techdocs/src/reader/components/Reader.tsx | 11 +++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 .changeset/techdocs-dull-glasses-decide.md diff --git a/.changeset/techdocs-dull-glasses-decide.md b/.changeset/techdocs-dull-glasses-decide.md new file mode 100644 index 0000000000..f043c2f607 --- /dev/null +++ b/.changeset/techdocs-dull-glasses-decide.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Only replace the shadow dom if the content is changed to avoid a flickering UI. diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 0cb6c039d0..7307961772 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -397,6 +397,11 @@ const TheReader = ({ const dom = useTechDocsReaderDom(); const shadowDomRef = useRef(null); + const onReadyRef = useRef<() => void>(onReady); + useEffect(() => { + onReadyRef.current = onReady; + }, [onReady]); + useEffect(() => { if (!dom || !shadowDomRef.current) return; const shadowDiv = shadowDomRef.current; @@ -406,8 +411,10 @@ const TheReader = ({ shadowRoot.removeChild(child), ); shadowRoot.appendChild(dom); - onReady(); - }, [dom, onReady]); + onReadyRef.current(); + + // this hook must ONLY be triggered by a changed dom + }, [dom]); return ( <>