useShadowDomStylesLoading()

Home > @backstage/plugin-techdocs-react > useShadowDomStylesLoading

Returns the style's loading state.

Signature:

useShadowDomStylesLoading: (element: Element | null) => boolean

Parameters

Parameter	Type	Description
element	Element | null	which is the ShadowRoot tree.

**Returns:**

boolean

a boolean value, true if styles are being loaded.

Example

Here's an example that updates the sidebar position only after styles are calculated:

import {
  TechDocsShadowDom,
  useShadowDomStylesLoading,
} from '@backstage/plugin-techdocs-react';

export const TechDocsReaderPageContent = () => {
  // ...
  const dom = useTechDocsReaderDom(entity);
  const isStyleLoading = useShadowDomStylesLoading(dom);

  const updateSidebarPosition = useCallback(() => {
    //...
  }, [dom]);

  useEffect(() => {
    if (!isStyleLoading) {
      updateSidebarPosition();
    }
  }, [isStyleLoading, updateSidebarPosition]);

  const handleDomAppend = useCallback(
    (newShadowRoot: ShadowRoot) => {
      setShadowRoot(newShadowRoot);
    },
    [setShadowRoot],
  );

  return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;
};