@teambit/preview.ui.preview-placeholder 0.0.539 → 0.0.542

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/preview-placeholder.js +16 -7
  2. package/dist/preview-placeholder.js.map +1 -1
  3. package/dist/preview-placeholder.module.scss +16 -0
  4. package/package.json +4 -4
  5. package/preview-placeholder.module.scss +16 -0
  6. package/preview-placeholder.tsx +30 -13
  7. /package/dist/{preview-1741111850470.js → preview-1744773530378.js} +0 -0
package/dist/preview-placeholder.js CHANGED
@@ -34,7 +34,7 @@ const react_1 = __importStar(require("react"));
34
34
  const compositions_1 = require("@teambit/compositions");
35
35
  const design_ui_heading_1 = require("@teambit/design.ui.heading");
36
36
  const toolbox_string_capitalize_1 = require("@teambit/toolbox.string.capitalize");
37
- const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
37
+ const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
38
38
  const docs_1 = require("@teambit/docs");
39
39
  const preview_placeholder_module_scss_1 = __importDefault(require("./preview-placeholder.module.scss"));
40
40
  function getCompositions(component) {
@@ -65,16 +65,25 @@ function getDescription(component) {
65
65
  return descriptionItem.value || '';
66
66
  }
67
67
  function PreviewPlaceholder(_a) {
68
- var _b;
68
+ var _b, _c;
69
69
  var { component, componentDescriptor, Container = ({ children, className }) => react_1.default.createElement("div", { className: className }, children), shouldShowPreview = ((_b = component === null || component === void 0 ? void 0 : component.compositions.length) !== null && _b !== void 0 ? _b : 0) > 0 && (component === null || component === void 0 ? void 0 : component.buildStatus) !== 'pending', } = _a;
70
70
  const compositions = component === null || component === void 0 ? void 0 : component.compositions;
71
71
  const description = componentDescriptor && getDescription(componentDescriptor);
72
72
  const displayName = componentDescriptor && getDisplayName(componentDescriptor);
73
+ const serverUrl = (_c = component === null || component === void 0 ? void 0 : component.server) === null || _c === void 0 ? void 0 : _c.url;
74
+ const prevServerUrlRef = (0, react_1.useRef)(serverUrl);
75
+ const [forceRender, setForceRender] = react_1.default.useState(0);
76
+ (0, react_1.useEffect)(() => {
77
+ if (prevServerUrlRef.current !== serverUrl && shouldShowPreview) {
78
+ prevServerUrlRef.current = serverUrl;
79
+ setForceRender(prev => prev + 1);
80
+ }
81
+ }, [serverUrl, shouldShowPreview]);
73
82
  const selectedPreview = (0, react_1.useMemo)(() => {
74
83
  if (!shouldShowPreview || !component)
75
84
  return undefined;
76
85
  return selectDefaultComposition(component);
77
- }, [component, shouldShowPreview]);
86
+ }, [component, shouldShowPreview, forceRender]);
78
87
  if (!component || !componentDescriptor)
79
88
  return null;
80
89
  if (!shouldShowPreview || !compositions || !compositions.length) {
@@ -86,11 +95,11 @@ function PreviewPlaceholder(_a) {
86
95
  react_1.default.createElement("span", { className: preview_placeholder_module_scss_1.default.description }, description))));
87
96
  }
88
97
  const name = component.id.toString();
89
- if (!shouldShowPreview && component.buildStatus === 'pending')
98
+ if (!serverUrl || (!shouldShowPreview && (component.buildStatus === 'pending')))
90
99
  return (react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewPlaceholder, "data-tip": "", "data-for": name },
91
- react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "Ripple-processing" }),
92
- react_1.default.createElement("div", null, "Processing preview")));
93
- return (react_1.default.createElement(react_1.default.Fragment, null,
100
+ react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.skeletonContainer },
101
+ react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { lines: 12, className: preview_placeholder_module_scss_1.default.skeletonBlock }))));
102
+ return (react_1.default.createElement("div", { key: `${name}-${serverUrl}-${forceRender}` },
94
103
  react_1.default.createElement(compositions_1.ComponentComposition, { component: component, composition: selectedPreview, pubsub: false, includeEnv: true, loading: 'lazy', viewport: 1280 }),
95
104
  react_1.default.createElement("div", { className: preview_placeholder_module_scss_1.default.previewOverlay })));
96
105
  }
package/dist/preview-placeholder.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"preview-placeholder.js","sourceRoot":"","sources":["../preview-placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,0CAOC;AAED,wCAGC;AASD,wCAIC;AAED,gDAmDC;AAzFD,+CAAiE;AACjE,wDAA8F;AAC9F,kEAAoD;AACpD,kFAAgE;AAChE,gFAAyD;AAGzD,wCAA2C;AAE3C,wGAAuD;AAEvD,SAAgB,eAAe,CAAC,SAA8B;IAC5D,MAAM,KAAK,GAAQ,SAAS,CAAC,GAAG,CAAC,iCAAkB,CAAC,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IACtB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;IAC7C,IAAI,CAAC,YAAY;QAAE,OAAO,EAAE,CAAC;IAE7B,OAAO,0BAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAC7C,CAAC;AAED,SAAgB,cAAc,CAAC,SAA8B;IAC3D,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,sCAAU,EAAC,KAAK,CAAC,CAAC,CAAC;IAC9E,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1B,CAAC;AAED,SAAS,eAAe,CAAC,SAA8B,EAAE,IAAY;;IACnE,MAAM,IAAI,GAAG,CAAA,MAAA,SAAS,CAAC,GAAG,CAAM,iBAAU,CAAC,EAAE,CAAC,0CAAE,IAAI,KAAI,EAAE,CAAC;IAC3D,IAAI,CAAC,IAAI,IAAI,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,0CAAE,KAAK,CAAA;QAAE,OAAO,SAAS,CAAC;IACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;IAChC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACrD,CAAC;AAED,SAAgB,cAAc,CAAC,SAA8B;IAC3D,MAAM,eAAe,GAAG,eAAe,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAClE,IAAI,CAAC,eAAe;QAAE,OAAO,EAAE,CAAC;IAChC,OAAO,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC;AACrC,CAAC;AAED,SAAgB,kBAAkB,CAAC,EAUlC;;QAVkC,EACjC,SAAS,EACT,mBAAmB,EACnB,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,uCAAK,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAO,EACpF,iBAAiB,GAAG,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,CAAC,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,MAAK,SAAS;IAOrG,MAAM,YAAY,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,CAAC;IAC7C,MAAM,WAAW,GAAG,mBAAmB,IAAI,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC/E,MAAM,WAAW,GAAG,mBAAmB,IAAI,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAE/E,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACnC,IAAI,CAAC,iBAAiB,IAAI,CAAC,SAAS;YAAE,OAAO,SAAS,CAAC;QACvD,OAAO,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEnC,IAAI,CAAC,SAAS,IAAI,CAAC,mBAAmB;QAAE,OAAO,IAAI,CAAC;IAEpD,IAAI,CAAC,iBAAiB,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;QAChE,OAAO,CACL,8BAAC,SAAS,IAAC,SAAS,EAAE,yCAAM,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS;YAC1D,uCAAK,SAAS,EAAE,yCAAM,CAAC,KAAK;gBAC1B,8BAAC,sBAAE,IAAC,SAAS,EAAE,yCAAM,CAAC,UAAU,IAAG,SAAS,CAAC,EAAE,CAAC,KAAK,CAAM,CACvD;YACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,SAAS;gBAC9B,8BAAC,sBAAE,IAAC,SAAS,EAAE,yCAAM,CAAC,cAAc,IAAG,WAAW,CAAM;gBACxD,wCAAM,SAAS,EAAE,yCAAM,CAAC,WAAW,IAAG,WAAW,CAAQ,CACrD,CACI,CACb,CAAC;IACJ,CAAC;IACD,MAAM,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IAErC,IAAI,CAAC,iBAAiB,IAAI,SAAS,CAAC,WAAW,KAAK,SAAS;QAC3D,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,kBAAkB,cAAW,EAAE,cAAW,IAAI;YACnE,8BAAC,+BAAI,IAAC,EAAE,EAAC,mBAAmB,GAAG;YAC/B,gEAA6B,CACzB,CACP,CAAC;IAEJ,OAAO,CACL;QACE,8BAAC,mCAAoB,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,GAAG;QAC7I,uCAAK,SAAS,EAAE,yCAAM,CAAC,cAAc,GAAI,CACxC,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,0BAA0B,GAAG,SAAS,CAAC;AAE7C,SAAS,wBAAwB,CAAC,SAAyB;IACzD,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IAEnC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,CAAC;AACrF,CAAC"}
1
+ {"version":3,"file":"preview-placeholder.js","sourceRoot":"","sources":["../preview-placeholder.tsx"],"names":[],"mappings":"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"}
package/dist/preview-placeholder.module.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  height: 100%;
7
+ width: 100%;
7
8
  color: #c7c7c7;
8
9
  pointer-events: auto;
9
10
  > span:first-child {
@@ -76,3 +77,18 @@
76
77
  z-index: 100;
77
78
  cursor: pointer;
78
79
  }
80
+
81
+ .skeletonContainer {
82
+ width: 100%;
83
+ height: 100%;
84
+ position: relative;
85
+ color: var(--skeleton-color, #e0e0e0);
86
+ opacity: 0.7;
87
+ }
88
+
89
+ .skeletonBlock {
90
+ width: 100%;
91
+ height: 100%;
92
+ min-height: 200px;
93
+ display: block;
94
+ }
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@teambit/preview.ui.preview-placeholder",
3
- "version": "0.0.539",
3
+ "version": "0.0.542",
4
4
  "homepage": "https://bit.cloud/teambit/preview/ui/preview-placeholder",
5
5
  "main": "dist/index.js",
6
6
  "componentId": {
7
7
  "scope": "teambit.preview",
8
8
  "name": "ui/preview-placeholder",
9
- "version": "0.0.539"
9
+ "version": "0.0.542"
10
10
  },
11
11
  "dependencies": {
12
12
  "core-js": "^3.0.0",
13
+ "@teambit/base-ui.loaders.skeleton": "1.0.1",
13
14
  "@teambit/design.ui.heading": "1.0.16",
14
- "@teambit/evangelist.elements.icon": "1.0.2",
15
- "@teambit/component-descriptor": "0.0.433",
15
+ "@teambit/component-descriptor": "0.0.435",
16
16
  "@teambit/toolbox.string.capitalize": "0.0.500"
17
17
  },
18
18
  "devDependencies": {
package/preview-placeholder.module.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  height: 100%;
7
+ width: 100%;
7
8
  color: #c7c7c7;
8
9
  pointer-events: auto;
9
10
  > span:first-child {
@@ -76,3 +77,18 @@
76
77
  z-index: 100;
77
78
  cursor: pointer;
78
79
  }
80
+
81
+ .skeletonContainer {
82
+ width: 100%;
83
+ height: 100%;
84
+ position: relative;
85
+ color: var(--skeleton-color, #e0e0e0);
86
+ opacity: 0.7;
87
+ }
88
+
89
+ .skeletonBlock {
90
+ width: 100%;
91
+ height: 100%;
92
+ min-height: 200px;
93
+ display: block;
94
+ }
package/preview-placeholder.tsx CHANGED
@@ -1,12 +1,11 @@
1
- import React, { useMemo, ComponentType, ReactNode } from 'react';
1
+ import React, { useMemo, useEffect, useRef, ComponentType, ReactNode } from 'react';
2
2
  import { CompositionsAspect, ComponentComposition, Composition } from '@teambit/compositions';
3
3
  import { H3, H5 } from '@teambit/design.ui.heading';
4
4
  import { capitalize } from '@teambit/toolbox.string.capitalize';
5
- import { Icon } from '@teambit/evangelist.elements.icon';
6
5
  import { ComponentModel } from '@teambit/component';
7
6
  import { ComponentDescriptor } from '@teambit/component-descriptor';
7
+ import { BlockSkeleton } from '@teambit/base-ui.loaders.skeleton';
8
8
  import { DocsAspect } from '@teambit/docs';
9
-
10
9
  import styles from './preview-placeholder.module.scss';
11
10
 
12
11
  export function getCompositions(component: ComponentDescriptor) {
@@ -14,7 +13,6 @@ export function getCompositions(component: ComponentDescriptor) {
14
13
  if (!entry) return [];
15
14
  const compositions = entry.data.compositions;
16
15
  if (!compositions) return [];
17
-
18
16
  return Composition.fromArray(compositions);
19
17
  }
20
18
 
@@ -50,11 +48,22 @@ export function PreviewPlaceholder({
50
48
  const compositions = component?.compositions;
51
49
  const description = componentDescriptor && getDescription(componentDescriptor);
52
50
  const displayName = componentDescriptor && getDisplayName(componentDescriptor);
51
+ const serverUrl = component?.server?.url;
52
+
53
+ const prevServerUrlRef = useRef(serverUrl);
54
+ const [forceRender, setForceRender] = React.useState(0);
55
+
56
+ useEffect(() => {
57
+ if (prevServerUrlRef.current !== serverUrl && shouldShowPreview) {
58
+ prevServerUrlRef.current = serverUrl;
59
+ setForceRender(prev => prev + 1);
60
+ }
61
+ }, [serverUrl, shouldShowPreview]);
53
62
 
54
63
  const selectedPreview = useMemo(() => {
55
64
  if (!shouldShowPreview || !component) return undefined;
56
65
  return selectDefaultComposition(component);
57
- }, [component, shouldShowPreview]);
66
+ }, [component, shouldShowPreview, forceRender]);
58
67
 
59
68
  if (!component || !componentDescriptor) return null;
60
69
 
@@ -71,21 +80,30 @@ export function PreviewPlaceholder({
71
80
  </Container>
72
81
  );
73
82
  }
83
+
74
84
  const name = component.id.toString();
75
85
 
76
- if (!shouldShowPreview && component.buildStatus === 'pending')
86
+ if (!serverUrl || (!shouldShowPreview && (component.buildStatus === 'pending')))
77
87
  return (
78
88
  <div className={styles.previewPlaceholder} data-tip="" data-for={name}>
79
- <Icon of="Ripple-processing" />
80
- <div>Processing preview</div>
89
+ <div className={styles.skeletonContainer}>
90
+ <BlockSkeleton lines={12} className={styles.skeletonBlock} />
91
+ </div>
81
92
  </div>
82
93
  );
83
94
 
84
95
  return (
85
- <>
86
- <ComponentComposition component={component} composition={selectedPreview} pubsub={false} includeEnv={true} loading={'lazy'} viewport={1280}/>
96
+ <div key={`${name}-${serverUrl}-${forceRender}`}>
97
+ <ComponentComposition
98
+ component={component}
99
+ composition={selectedPreview}
100
+ pubsub={false}
101
+ includeEnv={true}
102
+ loading={'lazy'}
103
+ viewport={1280}
104
+ />
87
105
  <div className={styles.previewOverlay} />
88
- </>
106
+ </div>
89
107
  );
90
108
  }
91
109
 
@@ -93,6 +111,5 @@ const PREVIEW_COMPOSITION_SUFFIX = 'Preview';
93
111
 
94
112
  function selectDefaultComposition(component: ComponentModel) {
95
113
  const { compositions } = component;
96
-
97
114
  return compositions.find((x) => x.identifier.endsWith(PREVIEW_COMPOSITION_SUFFIX));
98
- }
115
+ }