react-cosmos-ui 6.0.0-alpha.13 → 6.0.0-alpha.14

package/dist/{plugins/ContentOverlay/shared.d.ts → components/ContentOverlay.d.ts}

@@ -1,8 +1,6 @@
-import { PluginContext } from 'react-plugin';
-import { ContentOverlaySpec } from './spec.js';
-export type ContentOverlayContext = PluginContext<ContentOverlaySpec>;
 export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RendererOverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OverlayBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IllustrationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/{plugins/ContentOverlay/shared.js → components/ContentOverlay.js}

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
-import { screenGrey1, screenGrey2, screenGrey5, screenGrey6, screenPrimary2, screenPrimary3, } from '../../style/colors.js';
+import { screenGrey1, screenGrey2, screenGrey5, screenGrey6, screenPrimary2, screenPrimary3, } from '../style/colors.js';
+import { rendererBg } from '../style/vars.js';
 export const OverlayContainer = styled.div `
   position: absolute;
   top: 0;
@@ -13,7 +14,11 @@ export const OverlayContainer = styled.div `
   background: ${screenGrey6};
   overflow: auto;
 `;
-export const ContentContainer = styled.div `
+export const RendererOverlayContainer = styled(OverlayContainer) `
+  background-color: #fff;
+  background-image: ${rendererBg};
+`;
+export const OverlayBody = styled.div `
   flex-shrink: 0;
   display: flex;
   flex-direction: row;

package/dist/components/DelayedLoading.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type DelayedLoadingProps = {
+    children: ReactNode;
+    delay?: number;
+};
+export declare function DelayedLoading(props: DelayedLoadingProps): JSX.Element;
+export {};

package/dist/components/DelayedLoading.js

@@ -0,0 +1,12 @@
+import React, { useEffect, useState } from 'react';
+export function DelayedLoading(props) {
+    const [loading, setLoading] = useState(false);
+    // Only enter loading state if this component remains rendered after after a
+    // short amount of time. This prevents flashing loading screens when the
+    // loading state goes away quick enough.
+    useEffect(() => {
+        const timeoutId = setTimeout(() => setLoading(true), props.delay ?? 400);
+        return () => clearTimeout(timeoutId);
+    }, [props.delay]);
+    return React.createElement(React.Fragment, null, loading && props.children);
+}

package/dist/index.d.ts

@@ -3,7 +3,6 @@ export * from './components/icons/index.js';
 export * from './playgroundConfig.js';
 export * from './plugins/BuildNotifications/spec.js';
 export * from './plugins/ClassStatePanel/spec.js';
-export * from './plugins/ContentOverlay/spec.js';
 export * from './plugins/ControlPanel/spec.js';
 export * from './plugins/ControlSelect/spec.js';
 export * from './plugins/Core/spec.js';

package/dist/index.js

@@ -3,7 +3,6 @@ export * from './components/icons/index.js';
 export * from './playgroundConfig.js';
 export * from './plugins/BuildNotifications/spec.js';
 export * from './plugins/ClassStatePanel/spec.js';
-export * from './plugins/ContentOverlay/spec.js';
 export * from './plugins/ControlPanel/spec.js';
 export * from './plugins/ControlSelect/spec.js';
 export * from './plugins/Core/spec.js';