@atlaskit/editor-plugin-placeholder
Version:
Placeholder plugin for @atlaskit/editor-core.
34 lines (33 loc) • 1.51 kB
JavaScript
/* PlaceholderLoadingSpinner.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./PlaceholderLoadingSpinner.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
import { isEmptyDocument } from '@atlaskit/editor-common/utils/document';
import { Box } from '@atlaskit/primitives/compiled/box';
import Spinner from '@atlaskit/spinner/spinner';
export const PlaceholderLoadingSpinner = ({
api,
editorView
}) => {
const isCollabInitializing = useSharedPluginStateWithSelector(api, ['collabEdit'], ({
collabEditState
}) => !!collabEditState && !collabEditState.initialised.collabInitialisedAt);
const doc = editorView === null || editorView === void 0 ? void 0 : editorView.state.doc;
if (!editorView || !isCollabInitializing || doc && !isEmptyDocument(doc)) {
return null;
}
// In this scenario
// - the collab plugin exists - but we don't have a "initial/placeholder" document
// - and the collab plugin is not yet ready
// So we show a placeholder spinner to indicate the content is still loading
return /*#__PURE__*/React.createElement(Box, {
xcss: spinnerContainerStyles.spinnerContainer
}, /*#__PURE__*/React.createElement(Spinner, {
interactionName: "live-pages-loading-spinner",
size: "medium"
}));
};
const spinnerContainerStyles = {
spinnerContainer: "_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _1bsb1osq"
};