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. |
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} />;
};