@teambit/docs 1.0.44 → 1.0.46

package/dist/overview/overview.js

@@ -68,6 +68,13 @@ function _overviewModule() {
   };
   return data;
 }
+function _readmeSkeleton() {
+  const data = require("./readme-skeleton");
+  _readmeSkeleton = function () {
+    return data;
+  };
+  return data;
+}
 const _excluded = ["onLoad", "style"]; // import { Icon } from '@teambit/design.elements.icon';
 // import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';
 // import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
@@ -98,16 +105,6 @@ function Overview({
   const showHeader = !((_component$preview = component.preview) !== null && _component$preview !== void 0 && _component$preview.legacyHeader);
   const [isLoading, setLoading] = (0, _react().useState)(true);
   const EmptyState = getEmptyState && getEmptyState();
-
-  // if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
-  //   return (
-  //     <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
-  //       this might take some time
-  //     </StatusMessageCard>
-  //   );
-
-  // if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
-  //   return <StatusMessageCard style={{ margin: 'auto' }} status="FAILURE" title="failed to get component preview " />;
   const buildFailed = ((_component$buildStatu = component.buildStatus) === null || _component$buildStatu === void 0 ? void 0 : _component$buildStatu.toLowerCase()) !== 'succeed' && (component === null || component === void 0 ? void 0 : component.host) === 'teambit.scope/scope';
   const isScaling = (_component$preview2 = component.preview) === null || _component$preview2 === void 0 ? void 0 : _component$preview2.isScaling;
   const iframeQueryParams = `skipIncludes=${((_component$preview3 = component.preview) === null || _component$preview3 === void 0 ? void 0 : _component$preview3.skipIncludes) || 'false'}`;
@@ -124,6 +121,11 @@ function Overview({
     setLoading(false);
     onLoad === null || onLoad === void 0 || onLoad(e, props);
   }, [onLoad]);
+
+  // reset the loading flag when components are switched
+  _react().default.useEffect(() => {
+    if (!isLoading) setLoading(true);
+  }, [component.id.toString()]);
   return /*#__PURE__*/_react().default.createElement("div", {
     className: _overviewModule().default.overviewWrapper,
     key: `${component.id.toString()}`
@@ -139,7 +141,9 @@ function Overview({
     component: component
   }), !buildFailed && /*#__PURE__*/_react().default.createElement("div", {
     className: _overviewModule().default.readme
-  }, /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, _extends({
+  }, isLoading && /*#__PURE__*/_react().default.createElement(_readmeSkeleton().ReadmeSkeleton, null, /*#__PURE__*/_react().default.createElement(_compositionsPanels().CompositionGallerySkeleton, {
+    compositionsLength: component.compositions.length
+  })), /*#__PURE__*/_react().default.createElement(_previewUi().ComponentPreview, _extends({
     onLoad: onPreviewLoad,
     previewName: "overview",
     pubsub: true,

package/dist/overview/overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_reactUiDocs","_component","_previewUi","_componentUi","_compositionsPanels","_overviewModule","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","BadgePosition","exports","Overview","titleBadges","overviewOptions","previewProps","getEmptyState","_component$preview","_component$buildStatu","_component$preview2","_component$preview3","_component$preview4","_component$preview5","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","overviewProps","flatten","values","showHeader","preview","legacyHeader","isLoading","setLoading","useState","EmptyState","buildFailed","buildStatus","toLowerCase","host","isScaling","iframeQueryParams","skipIncludes","overviewPropsValues","_ref","onLoad","style","rest","onPreviewLoad","React","useCallback","props","createElement","className","styles","overviewWrapper","id","toString","ComponentOverview","classNames","componentOverviewBlock","legacyPreview","displayName","version","abstract","description","labels","packageName","readme","ComponentPreview","previewName","pubsub","queryParams","viewport","fullContentHeight","disableScroll","width","height","minHeight","undefined","CompositionGallery","PropertiesTable","overviewPropsTable","componentId"],"sources":["overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType, useState } from 'react';\nimport classNames from 'classnames';\nimport { flatten } from 'lodash';\n// import { Icon } from '@teambit/design.elements.icon';\nimport { PropertiesTable } from '@teambit/react.ui.docs.properties-table';\n// import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';\nimport { ComponentContext, useComponentDescriptor } from '@teambit/component';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\n// import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { ComponentOverview } from '@teambit/component.ui.component-meta';\nimport { CompositionGallery } from '@teambit/compositions.panels.composition-gallery';\n// import { ReadmeSkeleton } from './readme-skeleton';\nimport styles from './overview.module.scss';\n\nexport enum BadgePosition {\n  Title,\n  SubTitle,\n  Labels,\n  Package,\n}\n\nexport type TitleBadge = {\n  component: ComponentType<any>;\n  weight?: number;\n  position?: BadgePosition;\n};\n\nexport type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;\n\nexport type OverviewOptions = () => { queryParams?: string };\n\nexport type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n  overviewOptions: OverviewOptionsSlot;\n  previewProps?: Partial<ComponentPreviewProps>;\n  getEmptyState?: () => ComponentType | undefined;\n};\n\nexport function Overview({ titleBadges, overviewOptions, previewProps, getEmptyState }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const componentDescriptor = useComponentDescriptor();\n  const overviewProps = flatten(overviewOptions.values())[0];\n  const showHeader = !component.preview?.legacyHeader;\n  const [isLoading, setLoading] = useState(true);\n  const EmptyState = getEmptyState && getEmptyState();\n\n  // if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n  //   return (\n  //     <StatusMessageCard style={{ margin: 'auto' }} status=\"PROCESSING\" title=\"component preview pending\">\n  //       this might take some time\n  //     </StatusMessageCard>\n  //   );\n\n  // if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n  //   return <StatusMessageCard style={{ margin: 'auto' }} status=\"FAILURE\" title=\"failed to get component preview \" />;\n  const buildFailed = component.buildStatus?.toLowerCase() !== 'succeed' && component?.host === 'teambit.scope/scope';\n\n  const isScaling = component.preview?.isScaling;\n\n  const iframeQueryParams = `skipIncludes=${component.preview?.skipIncludes || 'false'}`;\n\n  const overviewPropsValues = overviewProps && overviewProps();\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { onLoad, style, ...rest } = previewProps || {};\n\n  const onPreviewLoad = React.useCallback(\n    (e, props) => {\n      setLoading(false);\n      onLoad?.(e, props);\n    },\n    [onLoad]\n  );\n\n  return (\n    <div className={styles.overviewWrapper} key={`${component.id.toString()}`}>\n      {showHeader && (\n        <ComponentOverview\n          className={classNames(styles.componentOverviewBlock, !isScaling && styles.legacyPreview)}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description}\n          labels={component.labels}\n          packageName={component.packageName}\n          titleBadges={flatten(titleBadges.values())}\n          componentDescriptor={componentDescriptor}\n          component={component}\n        />\n      )}\n\n      {/* TODO - @oded replace with new panel card same for compositions. */}\n\n      {/* <LinkedHeading size=\"xs\" className={styles.title}>\n        <Icon of=\"text\" /> <span>README</span>\n      </LinkedHeading> */}\n      {!buildFailed && (\n        <div className={styles.readme}>\n          {/* {isLoading && <ReadmeSkeleton />} */}\n          <ComponentPreview\n            onLoad={onPreviewLoad}\n            previewName=\"overview\"\n            pubsub={true}\n            queryParams={[iframeQueryParams, overviewPropsValues?.queryParams || '']}\n            viewport={null}\n            fullContentHeight\n            disableScroll={true}\n            {...rest}\n            component={component}\n            style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}\n          />\n          {component.preview?.skipIncludes && <CompositionGallery isLoading={isLoading} component={component} />}\n          {component.preview?.skipIncludes && (\n            <PropertiesTable className={styles.overviewPropsTable} componentId={component.id.toString()} />\n          )}\n        </div>\n      )}\n      {buildFailed && EmptyState && <EmptyState />}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_lodash","_reactUiDocs","_component","_previewUi","_componentUi","_compositionsPanels","_overviewModule","_readmeSkeleton","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","BadgePosition","exports","Overview","titleBadges","overviewOptions","previewProps","getEmptyState","_component$preview","_component$buildStatu","_component$preview2","_component$preview3","_component$preview4","_component$preview5","component","useContext","ComponentContext","componentDescriptor","useComponentDescriptor","overviewProps","flatten","values","showHeader","preview","legacyHeader","isLoading","setLoading","useState","EmptyState","buildFailed","buildStatus","toLowerCase","host","isScaling","iframeQueryParams","skipIncludes","overviewPropsValues","_ref","onLoad","style","rest","onPreviewLoad","React","useCallback","props","useEffect","id","toString","createElement","className","styles","overviewWrapper","ComponentOverview","classNames","componentOverviewBlock","legacyPreview","displayName","version","abstract","description","labels","packageName","readme","ReadmeSkeleton","CompositionGallerySkeleton","compositionsLength","compositions","ComponentPreview","previewName","pubsub","queryParams","viewport","fullContentHeight","disableScroll","width","height","minHeight","undefined","CompositionGallery","PropertiesTable","overviewPropsTable","componentId"],"sources":["overview.tsx"],"sourcesContent":["import React, { useContext, ComponentType, useState } from 'react';\nimport classNames from 'classnames';\nimport { flatten } from 'lodash';\n// import { Icon } from '@teambit/design.elements.icon';\nimport { PropertiesTable } from '@teambit/react.ui.docs.properties-table';\n// import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';\nimport { ComponentContext, useComponentDescriptor } from '@teambit/component';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\n// import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { ComponentOverview } from '@teambit/component.ui.component-meta';\nimport { CompositionGallery, CompositionGallerySkeleton } from '@teambit/compositions.panels.composition-gallery';\n// import { ReadmeSkeleton } from './readme-skeleton';\nimport styles from './overview.module.scss';\nimport { ReadmeSkeleton } from './readme-skeleton';\n\nexport enum BadgePosition {\n  Title,\n  SubTitle,\n  Labels,\n  Package,\n}\n\nexport type TitleBadge = {\n  component: ComponentType<any>;\n  weight?: number;\n  position?: BadgePosition;\n};\n\nexport type TitleBadgeSlot = SlotRegistry<TitleBadge[]>;\n\nexport type OverviewOptions = () => { queryParams?: string };\n\nexport type OverviewOptionsSlot = SlotRegistry<OverviewOptions>;\n\nexport type OverviewProps = {\n  titleBadges: TitleBadgeSlot;\n  overviewOptions: OverviewOptionsSlot;\n  previewProps?: Partial<ComponentPreviewProps>;\n  getEmptyState?: () => ComponentType | undefined;\n};\n\nexport function Overview({ titleBadges, overviewOptions, previewProps, getEmptyState }: OverviewProps) {\n  const component = useContext(ComponentContext);\n  const componentDescriptor = useComponentDescriptor();\n  const overviewProps = flatten(overviewOptions.values())[0];\n  const showHeader = !component.preview?.legacyHeader;\n  const [isLoading, setLoading] = useState(true);\n  const EmptyState = getEmptyState && getEmptyState();\n\n  const buildFailed = component.buildStatus?.toLowerCase() !== 'succeed' && component?.host === 'teambit.scope/scope';\n\n  const isScaling = component.preview?.isScaling;\n\n  const iframeQueryParams = `skipIncludes=${component.preview?.skipIncludes || 'false'}`;\n\n  const overviewPropsValues = overviewProps && overviewProps();\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { onLoad, style, ...rest } = previewProps || {};\n\n  const onPreviewLoad = React.useCallback(\n    (e, props) => {\n      setLoading(false);\n      onLoad?.(e, props);\n    },\n    [onLoad]\n  );\n\n  // reset the loading flag when components are switched\n  React.useEffect(() => {\n    if (!isLoading) setLoading(true);\n  }, [component.id.toString()]);\n\n  return (\n    <div className={styles.overviewWrapper} key={`${component.id.toString()}`}>\n      {showHeader && (\n        <ComponentOverview\n          className={classNames(styles.componentOverviewBlock, !isScaling && styles.legacyPreview)}\n          displayName={component.displayName}\n          version={component.version}\n          abstract={component.description}\n          labels={component.labels}\n          packageName={component.packageName}\n          titleBadges={flatten(titleBadges.values())}\n          componentDescriptor={componentDescriptor}\n          component={component}\n        />\n      )}\n      {!buildFailed && (\n        <div className={styles.readme}>\n          {isLoading && (\n            <ReadmeSkeleton>\n              <CompositionGallerySkeleton compositionsLength={component.compositions.length} />\n            </ReadmeSkeleton>\n          )}\n          <ComponentPreview\n            onLoad={onPreviewLoad}\n            previewName=\"overview\"\n            pubsub={true}\n            queryParams={[iframeQueryParams, overviewPropsValues?.queryParams || '']}\n            viewport={null}\n            fullContentHeight\n            disableScroll={true}\n            {...rest}\n            component={component}\n            style={{ width: '100%', height: '100%', minHeight: !isScaling ? 500 : undefined }}\n          />\n          {component.preview?.skipIncludes && <CompositionGallery isLoading={isLoading} component={component} />}\n          {component.preview?.skipIncludes && (\n            <PropertiesTable className={styles.overviewPropsTable} componentId={component.id.toString()} />\n          )}\n        </div>\n      )}\n      {buildFailed && EmptyState && <EmptyState />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/overview/readme-skeleton.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare function ReadmeSkeleton(): React.JSX.Element;
+export declare function ReadmeSkeleton({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/overview/readme-skeleton.js

@@ -26,7 +26,9 @@ function _overviewModule() {
   return data;
 }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ReadmeSkeleton() {
+function ReadmeSkeleton({
+  children
+}) {
   return /*#__PURE__*/_react().default.createElement("div", {
     className: _overviewModule().default.readmeSkeleton
   }, /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
@@ -49,13 +51,7 @@ function ReadmeSkeleton() {
       width: '100%',
       marginBottom: 40
     }
-  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
-    width: "80%"
-  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
-    width: "40%"
-  }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
-    width: "25%"
-  }));
+  }), children);
 }
 
 //# sourceMappingURL=readme-skeleton.js.map

package/dist/overview/readme-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_baseUiLoaders","_overviewModule","obj","__esModule","default","ReadmeSkeleton","createElement","className","styles","readmeSkeleton","LineSkeleton","width","style","marginBottom","BlockSkeleton","lines"],"sources":["readme-skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { LineSkeleton, BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';\nimport styles from './overview.module.scss';\n\nexport function ReadmeSkeleton() {\n  return (\n    <div className={styles.readmeSkeleton}>\n      <LineSkeleton width=\"80%\" />\n      <LineSkeleton width=\"70%\" />\n      <LineSkeleton width=\"40%\" style={{ marginBottom: 40 }} />\n\n      <LineSkeleton width=\"30%\" style={{ marginBottom: 16 }} />\n      <BlockSkeleton lines={10} style={{ width: '100%', marginBottom: 40 }} />\n      <LineSkeleton width=\"80%\" />\n      <LineSkeleton width=\"40%\" />\n      <LineSkeleton width=\"25%\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,eAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,cAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA4C,SAAAC,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAErC,SAASG,cAAcA,CAAA,EAAG;EAC/B,oBACET,MAAA,GAAAQ,OAAA,CAAAE,aAAA;IAAKC,SAAS,EAAEC,yBAAM,CAACC;EAAe,gBACpCb,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eAEzDjB,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACzDjB,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAc,aAAa;IAACC,KAAK,EAAE,EAAG;IAACH,KAAK,EAAE;MAAED,KAAK,EAAE,MAAM;MAAEE,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACxEjB,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5Bf,MAAA,GAAAQ,OAAA,CAAAE,aAAA,CAACN,cAAA,GAAAU,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CACxB,CAAC;AAEV"}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_baseUiLoaders","_overviewModule","obj","__esModule","default","ReadmeSkeleton","children","createElement","className","styles","readmeSkeleton","LineSkeleton","width","style","marginBottom","BlockSkeleton","lines"],"sources":["readme-skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { LineSkeleton, BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';\nimport styles from './overview.module.scss';\n\nexport function ReadmeSkeleton({ children }: { children?: React.ReactNode }) {\n  return (\n    <div className={styles.readmeSkeleton}>\n      <LineSkeleton width=\"80%\" />\n      <LineSkeleton width=\"70%\" />\n      <LineSkeleton width=\"40%\" style={{ marginBottom: 40 }} />\n      <LineSkeleton width=\"30%\" style={{ marginBottom: 16 }} />\n      <BlockSkeleton lines={10} style={{ width: '100%', marginBottom: 40 }} />\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,eAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,cAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA4C,SAAAC,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAErC,SAASG,cAAcA,CAAC;EAAEC;AAAyC,CAAC,EAAE;EAC3E,oBACEV,MAAA,GAAAQ,OAAA,CAAAG,aAAA;IAAKC,SAAS,EAAEC,yBAAM,CAACC;EAAe,gBACpCd,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5BhB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC;EAAK,CAAE,CAAC,eAC5BhB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACzDlB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAW,YAAY;IAACC,KAAK,EAAC,KAAK;IAACC,KAAK,EAAE;MAAEC,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,eACzDlB,MAAA,GAAAQ,OAAA,CAAAG,aAAA,CAACP,cAAA,GAAAe,aAAa;IAACC,KAAK,EAAE,EAAG;IAACH,KAAK,EAAE;MAAED,KAAK,EAAE,MAAM;MAAEE,YAAY,EAAE;IAAG;EAAE,CAAE,CAAC,EACvER,QACE,CAAC;AAEV"}

package/dist/{preview-1699377714268.js → preview-1699443637127.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.44/dist/docs.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.44/dist/docs.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.46/dist/docs.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.docs_docs@1.0.46/dist/docs.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/overview/overview.tsx

@@ -9,9 +9,10 @@ import type { SlotRegistry } from '@teambit/harmony';
 import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
 // import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
 import { ComponentOverview } from '@teambit/component.ui.component-meta';
-import { CompositionGallery } from '@teambit/compositions.panels.composition-gallery';
+import { CompositionGallery, CompositionGallerySkeleton } from '@teambit/compositions.panels.composition-gallery';
 // import { ReadmeSkeleton } from './readme-skeleton';
 import styles from './overview.module.scss';
+import { ReadmeSkeleton } from './readme-skeleton';
 
 export enum BadgePosition {
   Title,
@@ -47,15 +48,6 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
   const [isLoading, setLoading] = useState(true);
   const EmptyState = getEmptyState && getEmptyState();
 
-  // if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
-  //   return (
-  //     <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
-  //       this might take some time
-  //     </StatusMessageCard>
-  //   );
-
-  // if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
-  //   return <StatusMessageCard style={{ margin: 'auto' }} status="FAILURE" title="failed to get component preview " />;
   const buildFailed = component.buildStatus?.toLowerCase() !== 'succeed' && component?.host === 'teambit.scope/scope';
 
   const isScaling = component.preview?.isScaling;
@@ -75,6 +67,11 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
     [onLoad]
   );
 
+  // reset the loading flag when components are switched
+  React.useEffect(() => {
+    if (!isLoading) setLoading(true);
+  }, [component.id.toString()]);
+
   return (
     <div className={styles.overviewWrapper} key={`${component.id.toString()}`}>
       {showHeader && (
@@ -90,15 +87,13 @@ export function Overview({ titleBadges, overviewOptions, previewProps, getEmptyS
           component={component}
         />
       )}
-
-      {/* TODO - @oded replace with new panel card same for compositions. */}
-
-      {/* <LinkedHeading size="xs" className={styles.title}>
-        <Icon of="text" /> <span>README</span>
-      </LinkedHeading> */}
       {!buildFailed && (
         <div className={styles.readme}>
-          {/* {isLoading && <ReadmeSkeleton />} */}
+          {isLoading && (
+            <ReadmeSkeleton>
+              <CompositionGallerySkeleton compositionsLength={component.compositions.length} />
+            </ReadmeSkeleton>
+          )}
           <ComponentPreview
             onLoad={onPreviewLoad}
             previewName="overview"

package/overview/readme-skeleton.tsx

@@ -2,18 +2,15 @@ import React from 'react';
 import { LineSkeleton, BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
 import styles from './overview.module.scss';
 
-export function ReadmeSkeleton() {
+export function ReadmeSkeleton({ children }: { children?: React.ReactNode }) {
   return (
     <div className={styles.readmeSkeleton}>
       <LineSkeleton width="80%" />
       <LineSkeleton width="70%" />
       <LineSkeleton width="40%" style={{ marginBottom: 40 }} />
-
       <LineSkeleton width="30%" style={{ marginBottom: 16 }} />
       <BlockSkeleton lines={10} style={{ width: '100%', marginBottom: 40 }} />
-      <LineSkeleton width="80%" />
-      <LineSkeleton width="40%" />
-      <LineSkeleton width="25%" />
+      {children}
     </div>
   );
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/docs",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "homepage": "https://bit.cloud/teambit/docs/docs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.docs",
     "name": "docs",
-    "version": "1.0.44"
+    "version": "1.0.46"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -21,20 +21,20 @@
     "@teambit/docs.ui.overview-compare": "1.0.10",
     "@teambit/component.ui.component-meta": "0.0.357",
     "@teambit/base-ui.loaders.skeleton": "1.0.1",
-    "@teambit/compiler": "1.0.44",
-    "@teambit/component": "1.0.44",
-    "@teambit/pkg": "1.0.44",
-    "@teambit/workspace": "1.0.44",
-    "@teambit/cli": "0.0.809",
-    "@teambit/dev-files": "1.0.44",
-    "@teambit/envs": "1.0.44",
-    "@teambit/graphql": "1.0.44",
-    "@teambit/logger": "0.0.902",
-    "@teambit/preview": "1.0.44",
-    "@teambit/component-compare": "1.0.44",
-    "@teambit/ui": "1.0.44",
-    "@teambit/pubsub": "1.0.44",
-    "@teambit/compositions.panels.composition-gallery": "0.0.169",
+    "@teambit/compiler": "1.0.46",
+    "@teambit/component": "1.0.46",
+    "@teambit/pkg": "1.0.46",
+    "@teambit/workspace": "1.0.46",
+    "@teambit/cli": "0.0.810",
+    "@teambit/dev-files": "1.0.46",
+    "@teambit/envs": "1.0.46",
+    "@teambit/graphql": "1.0.46",
+    "@teambit/logger": "0.0.903",
+    "@teambit/preview": "1.0.46",
+    "@teambit/component-compare": "1.0.46",
+    "@teambit/ui": "1.0.46",
+    "@teambit/pubsub": "1.0.46",
+    "@teambit/compositions.panels.composition-gallery": "0.0.171",
     "@teambit/preview.ui.component-preview": "1.0.3",
     "@teambit/react.ui.docs.properties-table": "0.0.21"
   },
@@ -50,7 +50,7 @@
     "@teambit/docs.content.docs-overview": "1.95.9"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.591",
+    "@teambit/legacy": "1.0.593",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },