@teambit/react.ui.loader-fallback 0.0.0-5f312aa95ec8fc788d5968eb3a7bd69db85b7b87

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LoaderFallback, useFallback } from './loader-fallback';
+export type { LoaderProps, useFallbackOptions } from './loader-fallback';

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFallback = exports.LoaderFallback = void 0;
+var loader_fallback_1 = require("./loader-fallback");
+Object.defineProperty(exports, "LoaderFallback", { enumerable: true, get: function () { return loader_fallback_1.LoaderFallback; } });
+Object.defineProperty(exports, "useFallback", { enumerable: true, get: function () { return loader_fallback_1.useFallback; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,qDAAgE;AAAvD,iHAAA,cAAc,OAAA;AAAE,8GAAA,WAAW,OAAA"}

package/dist/loader-fallback.compositions.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const RegularComponent: () => React.JSX.Element;
+export declare const UndefinedComponent: () => React.JSX.Element;
+export declare const ChangingComponent: () => React.JSX.Element;
+export declare const LongChangingComponent: () => React.JSX.Element;

package/dist/loader-fallback.compositions.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LongChangingComponent = exports.ChangingComponent = exports.UndefinedComponent = exports.RegularComponent = void 0;
+const react_1 = __importStar(require("react"));
+const loader_fallback_1 = require("./loader-fallback");
+const RegularComponent = () => {
+    return react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: Component, DefaultComponent: Fallback });
+};
+exports.RegularComponent = RegularComponent;
+const UndefinedComponent = () => {
+    return react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: undefined, DefaultComponent: Fallback });
+};
+exports.UndefinedComponent = UndefinedComponent;
+const ChangingComponent = () => {
+    const [current, setCurrent] = (0, react_1.useState)(() => Component);
+    (0, react_1.useEffect)(() => {
+        const intervalId = setInterval(() => {
+            setCurrent((x) => (x ? undefined : Component));
+        }, 2000);
+        return () => clearInterval(intervalId);
+    }, []);
+    return (react_1.default.createElement("div", { style: { width: 200, height: '3em' } },
+        react_1.default.createElement("div", { style: { fontSize: '0.8em' } }, "(this will not timeout, and show only the loader)"),
+        react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: current, DefaultComponent: Fallback })));
+};
+exports.ChangingComponent = ChangingComponent;
+const LongChangingComponent = () => {
+    const [current, setCurrent] = (0, react_1.useState)(() => Component);
+    (0, react_1.useEffect)(() => {
+        const intervalId = setInterval(() => {
+            setCurrent((x) => (x ? undefined : Component));
+        }, 6000);
+        return () => clearInterval(intervalId);
+    }, []);
+    return (react_1.default.createElement("div", { style: { width: 200, height: '3em' } },
+        react_1.default.createElement("div", { style: { fontSize: '0.8em' } }, "(this will timeout, showing the fallback component)"),
+        react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: current, DefaultComponent: Fallback, timeout: 2000 })));
+};
+exports.LongChangingComponent = LongChangingComponent;
+function Component() {
+    return react_1.default.createElement("div", { style: { color: '#2e945a' } }, "\u2713 actual component");
+}
+function Fallback() {
+    return react_1.default.createElement("div", null, "target is (undefined)");
+}
+//# sourceMappingURL=loader-fallback.compositions.js.map

package/dist/loader-fallback.compositions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-fallback.compositions.js","sourceRoot":"","sources":["../loader-fallback.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAmD;AACnD,uDAAmD;AAE5C,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,GAAI,CAAC;AAC3E,CAAC,CAAC;AAFW,QAAA,gBAAgB,oBAE3B;AAEK,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,GAAI,CAAC;AAC3E,CAAC,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEK,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAA4B,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAEnF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,UAAU,CAAC,CAAC,CAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;QACjE,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;QACvC,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,wDAAyD;QAC1F,8BAAC,gCAAc,IAAC,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,GAAI,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,iBAAiB,qBAiB5B;AAEK,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAA4B,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAEnF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,UAAU,CAAC,CAAC,CAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;QACjE,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;QACvC,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,0DAA2D;QAC5F,8BAAC,gCAAc,IAAC,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAI,CAC1E,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,qBAAqB,yBAiBhC;AAEF,SAAS,SAAS;IAChB,OAAO,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,8BAA0B,CAAC;AACpE,CAAC;AAED,SAAS,QAAQ;IACf,OAAO,mEAAgC,CAAC;AAC1C,CAAC"}

package/dist/loader-fallback.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentType, ReactElement } from 'react';
+import React from 'react';
+export type LoaderProps = {
+    /** component to render */
+    Target: ComponentType | undefined;
+    /** component to render when Target is undefined */
+    DefaultComponent: ComponentType;
+    /** component to render when target is missing, for a grace period, until rendering the default */
+    Loader?: ComponentType;
+    /** cool-down period (in ms) to show Loader, before showing the default */
+    timeout?: number;
+};
+export declare function LoaderFallback({ Target, Loader, DefaultComponent, timeout }: LoaderProps): ReactElement<any, string | React.JSXElementConstructor<any>>;
+export type useFallbackOptions = {
+    timeout?: number;
+    loader?: ReactElement;
+};
+export declare function useFallback(target: ReactElement | null | undefined, fallback: ReactElement, { timeout, loader }?: useFallbackOptions): ReactElement | null;

package/dist/loader-fallback.docs.mdx

@@ -0,0 +1,45 @@
+import { LoaderFallback } from './loader-fallback';
+
+Safely render a component, with a default fallback when it is `undefined`.  
+The `LoaderFallback` component also provides a grace period, where it shows a loader before switching to the default.  
+Set `timeout = 0` to skip the grace period.
+
+#### Example usage:
+
+```tsx
+// as a hook:
+const safeTarget = useFallback(Target && <Target />, <DefaultComponent />, { timeout: 10000, loader: <Loader /> });
+
+// as a component:
+<LoaderFallback Target={Target} DefaultComponent={DefaultComponent} timeout={10000} loader={Loader}>
+```
+
+### Logic is as follows:
+
+1. when component is `defined` -> render it
+1. when the initial value of the component is `undefined` -> show the default immediately
+1. when the component changes to be `undefined` -> show Loader for _x_ seconds
+   1. then, after _x_ seconds - show the default.
+
+<!-- live playground doesn't keep state when editing :( -->
+<!-- Try it out:
+
+```tsx live
+function Example() {
+  return (
+    <LoaderFallback
+      Target={RegularComponent} // comment this out
+      DefaultComponent={Fallback}
+      timeout={2000}
+    />
+  );
+
+  function RegularComponent() {
+    return <div>regular component</div>;
+  }
+
+  function Fallback() {
+    return <div>this shows when component is undefined</div>;
+  }
+}
+``` -->

package/dist/loader-fallback.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoaderFallback = LoaderFallback;
+exports.useFallback = useFallback;
+const react_1 = __importStar(require("react"));
+const base_ui_loaders_loader_ribbon_1 = require("@teambit/base-ui.loaders.loader-ribbon");
+function LoaderFallback({ Target, Loader = LoaderComponent, DefaultComponent, timeout = 15000 }) {
+    return useFallback(Target && react_1.default.createElement(Target, null), react_1.default.createElement(DefaultComponent, null), { timeout, loader: react_1.default.createElement(Loader, null) });
+}
+function useFallback(target, fallback, { timeout = 15000, loader = react_1.default.createElement(LoaderComponent, null) } = {}) {
+    const [working, setWorking] = (0, react_1.useState)(!!target);
+    const hasTarget = !!target;
+    (0, react_1.useEffect)(() => {
+        if (timeout <= 0)
+            return () => { };
+        if (hasTarget) {
+            setWorking(true);
+            return () => { };
+        }
+        const tmId = setTimeout(() => setWorking(false), timeout);
+        return () => clearTimeout(tmId);
+    }, [hasTarget, timeout]);
+    if (target)
+        return target;
+    if (working && timeout > 0)
+        return loader;
+    return fallback;
+}
+function LoaderComponent() {
+    return react_1.default.createElement(base_ui_loaders_loader_ribbon_1.LoaderRibbon, { active: true, style: { position: 'fixed', top: 0, left: 0, right: 0 } });
+}
+//# sourceMappingURL=loader-fallback.js.map

package/dist/loader-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-fallback.js","sourceRoot":"","sources":["../loader-fallback.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA,wCAEC;AAID,kCAsBC;AA1CD,+CAAmD;AACnD,0FAAsE;AAatE,SAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,eAAe,EAAE,gBAAgB,EAAE,OAAO,GAAG,KAAK,EAAe;IACjH,OAAO,WAAW,CAAC,MAAM,IAAI,8BAAC,MAAM,OAAG,EAAE,8BAAC,gBAAgB,OAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,8BAAC,MAAM,OAAG,EAAE,CAAC,CAAC;AAClG,CAAC;AAID,SAAgB,WAAW,CACzB,MAAuC,EACvC,QAAsB,EACtB,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,8BAAC,eAAe,OAAG,KAAyB,EAAE;IAE1E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC;IAE3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,CAAC;YAAE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClC,IAAI,SAAS,EAAE,CAAC;YACd,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,CAAC;QAED,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,IAAI,OAAO,IAAI,OAAO,GAAG,CAAC;QAAE,OAAO,MAAM,CAAC;IAC1C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,8BAAC,4CAAY,IAAC,MAAM,QAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAI,CAAC;AAC1F,CAAC"}

package/dist/loader-fallback.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/loader-fallback.spec.js

@@ -0,0 +1,50 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const loader_fallback_1 = require("./loader-fallback");
+describe('loader-fallback', () => {
+    it('should render target, when defined', () => {
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: Component, DefaultComponent: Default, Loader: Loader, timeout: 10 }));
+        // throws if not found, same as expect
+        getByText('test target');
+    });
+    it('should render default, when target is undefined', () => {
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: undefined, DefaultComponent: Default, Loader: Loader, timeout: 10 }));
+        // throws if not found, same as expect
+        getByText('Target is undefined');
+    });
+    it('should render loader, when target becomes undefined', () => {
+        const { rerender, getByText } = (0, react_2.render)(react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: Component, DefaultComponent: Default, Loader: Loader, timeout: 10 }));
+        rerender(react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: undefined, DefaultComponent: Default, Loader: Loader, timeout: 10 }));
+        // throws if not found, same as expect
+        getByText('loading...');
+    });
+    it('should render DefaultComponent, after timeout, when target becomes undefined', () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rerender, getByText } = (0, react_2.render)(react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: Component, DefaultComponent: Default, Loader: Loader, timeout: 10 }));
+        rerender(react_1.default.createElement(loader_fallback_1.LoaderFallback, { Target: undefined, DefaultComponent: Default, Loader: Loader, timeout: 10 }));
+        yield (0, react_2.waitFor)(() => getByText('Target is undefined'));
+    }));
+});
+function Component() {
+    return react_1.default.createElement("div", null, "test target");
+}
+function Default() {
+    return react_1.default.createElement("div", null, "Target is undefined");
+}
+function Loader() {
+    return react_1.default.createElement("div", null, "loading...");
+}
+//# sourceMappingURL=loader-fallback.spec.js.map

package/dist/loader-fallback.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-fallback.spec.js","sourceRoot":"","sources":["../loader-fallback.spec.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,kDAAyD;AACzD,uDAAmD;AAEnD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAI,CAC9F,CAAC;QAEF,sCAAsC;QACtC,SAAS,CAAC,aAAa,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAI,CAC9F,CAAC;QAEF,sCAAsC;QACtC,SAAS,CAAC,qBAAqB,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC7D,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EACpC,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAI,CAC9F,CAAC;QAEF,QAAQ,CAAC,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAI,CAAC,CAAC;QAExG,sCAAsC;QACtC,SAAS,CAAC,YAAY,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8EAA8E,EAAE,GAAS,EAAE;QAC5F,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EACpC,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAI,CAC9F,CAAC;QAEF,QAAQ,CAAC,8BAAC,gCAAc,IAAC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAI,CAAC,CAAC;QAExG,MAAM,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACxD,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,SAAS,SAAS;IAChB,OAAO,yDAAsB,CAAC;AAChC,CAAC;AAED,SAAS,OAAO;IACd,OAAO,iEAA8B,CAAC;AACxC,CAAC;AAED,SAAS,MAAM;IACb,OAAO,wDAAqB,CAAC;AAC/B,CAAC"}

package/dist/preview-1753818132020.js

@@ -0,0 +1,7 @@
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.react_ui_loader-fallback@5f312aa95ec8fc788d5968eb3a7bd69db85b7b87/dist/loader-fallback.compositions.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.react_ui_loader-fallback@5f312aa95ec8fc788d5968eb3a7bd69db85b7b87/dist/loader-fallback.docs.mdx';
+
+export const compositions = [compositions_0];
+export const overview = [overview_0];
+
+export const compositions_metadata = {"compositions":[{"displayName":"Regular component","identifier":"RegularComponent"},{"displayName":"Undefined component","identifier":"UndefinedComponent"},{"displayName":"Changing component","identifier":"ChangingComponent"},{"displayName":"Long changing component","identifier":"LongChangingComponent"}]};

package/index.ts

@@ -0,0 +1,2 @@
+export { LoaderFallback, useFallback } from './loader-fallback';
+export type { LoaderProps, useFallbackOptions } from './loader-fallback';

package/loader-fallback.compositions.tsx

@@ -0,0 +1,57 @@
+import type { ComponentType } from 'react';
+import React, { useEffect, useState } from 'react';
+import { LoaderFallback } from './loader-fallback';
+
+export const RegularComponent = () => {
+  return <LoaderFallback Target={Component} DefaultComponent={Fallback} />;
+};
+
+export const UndefinedComponent = () => {
+  return <LoaderFallback Target={undefined} DefaultComponent={Fallback} />;
+};
+
+export const ChangingComponent = () => {
+  const [current, setCurrent] = useState<ComponentType | undefined>(() => Component);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrent((x?: ComponentType) => (x ? undefined : Component));
+    }, 2000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div style={{ width: 200, height: '3em' }}>
+      <div style={{ fontSize: '0.8em' }}>(this will not timeout, and show only the loader)</div>
+      <LoaderFallback Target={current} DefaultComponent={Fallback} />
+    </div>
+  );
+};
+
+export const LongChangingComponent = () => {
+  const [current, setCurrent] = useState<ComponentType | undefined>(() => Component);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrent((x?: ComponentType) => (x ? undefined : Component));
+    }, 6000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div style={{ width: 200, height: '3em' }}>
+      <div style={{ fontSize: '0.8em' }}>(this will timeout, showing the fallback component)</div>
+      <LoaderFallback Target={current} DefaultComponent={Fallback} timeout={2000} />
+    </div>
+  );
+};
+
+function Component() {
+  return <div style={{ color: '#2e945a' }}>✓ actual component</div>;
+}
+
+function Fallback() {
+  return <div>target is (undefined)</div>;
+}

package/loader-fallback.docs.mdx

@@ -0,0 +1,45 @@
+import { LoaderFallback } from './loader-fallback';
+
+Safely render a component, with a default fallback when it is `undefined`.  
+The `LoaderFallback` component also provides a grace period, where it shows a loader before switching to the default.  
+Set `timeout = 0` to skip the grace period.
+
+#### Example usage:
+
+```tsx
+// as a hook:
+const safeTarget = useFallback(Target && <Target />, <DefaultComponent />, { timeout: 10000, loader: <Loader /> });
+
+// as a component:
+<LoaderFallback Target={Target} DefaultComponent={DefaultComponent} timeout={10000} loader={Loader}>
+```
+
+### Logic is as follows:
+
+1. when component is `defined` -> render it
+1. when the initial value of the component is `undefined` -> show the default immediately
+1. when the component changes to be `undefined` -> show Loader for _x_ seconds
+   1. then, after _x_ seconds - show the default.
+
+<!-- live playground doesn't keep state when editing :( -->
+<!-- Try it out:
+
+```tsx live
+function Example() {
+  return (
+    <LoaderFallback
+      Target={RegularComponent} // comment this out
+      DefaultComponent={Fallback}
+      timeout={2000}
+    />
+  );
+
+  function RegularComponent() {
+    return <div>regular component</div>;
+  }
+
+  function Fallback() {
+    return <div>this shows when component is undefined</div>;
+  }
+}
+``` -->

package/loader-fallback.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { LoaderFallback } from './loader-fallback';
+
+describe('loader-fallback', () => {
+  it('should render target, when defined', () => {
+    const { getByText } = render(
+      <LoaderFallback Target={Component} DefaultComponent={Default} Loader={Loader} timeout={10} />
+    );
+
+    // throws if not found, same as expect
+    getByText('test target');
+  });
+
+  it('should render default, when target is undefined', () => {
+    const { getByText } = render(
+      <LoaderFallback Target={undefined} DefaultComponent={Default} Loader={Loader} timeout={10} />
+    );
+
+    // throws if not found, same as expect
+    getByText('Target is undefined');
+  });
+
+  it('should render loader, when target becomes undefined', () => {
+    const { rerender, getByText } = render(
+      <LoaderFallback Target={Component} DefaultComponent={Default} Loader={Loader} timeout={10} />
+    );
+
+    rerender(<LoaderFallback Target={undefined} DefaultComponent={Default} Loader={Loader} timeout={10} />);
+
+    // throws if not found, same as expect
+    getByText('loading...');
+  });
+
+  it('should render DefaultComponent, after timeout, when target becomes undefined', async () => {
+    const { rerender, getByText } = render(
+      <LoaderFallback Target={Component} DefaultComponent={Default} Loader={Loader} timeout={10} />
+    );
+
+    rerender(<LoaderFallback Target={undefined} DefaultComponent={Default} Loader={Loader} timeout={10} />);
+
+    await waitFor(() => getByText('Target is undefined'));
+  });
+});
+
+function Component() {
+  return <div>test target</div>;
+}
+
+function Default() {
+  return <div>Target is undefined</div>;
+}
+
+function Loader() {
+  return <div>loading...</div>;
+}

package/loader-fallback.tsx

@@ -0,0 +1,48 @@
+import type { ComponentType, ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import { LoaderRibbon } from '@teambit/base-ui.loaders.loader-ribbon';
+
+export type LoaderProps = {
+  /** component to render */
+  Target: ComponentType | undefined;
+  /** component to render when Target is undefined */
+  DefaultComponent: ComponentType;
+  /** component to render when target is missing, for a grace period, until rendering the default */
+  Loader?: ComponentType;
+  /** cool-down period (in ms) to show Loader, before showing the default */
+  timeout?: number;
+};
+
+export function LoaderFallback({ Target, Loader = LoaderComponent, DefaultComponent, timeout = 15000 }: LoaderProps) {
+  return useFallback(Target && <Target />, <DefaultComponent />, { timeout, loader: <Loader /> });
+}
+
+export type useFallbackOptions = { timeout?: number; loader?: ReactElement };
+
+export function useFallback(
+  target: ReactElement | null | undefined,
+  fallback: ReactElement,
+  { timeout = 15000, loader = <LoaderComponent /> }: useFallbackOptions = {}
+): ReactElement | null {
+  const [working, setWorking] = useState(!!target);
+  const hasTarget = !!target;
+
+  useEffect(() => {
+    if (timeout <= 0) return () => {};
+    if (hasTarget) {
+      setWorking(true);
+      return () => {};
+    }
+
+    const tmId = setTimeout(() => setWorking(false), timeout);
+    return () => clearTimeout(tmId);
+  }, [hasTarget, timeout]);
+
+  if (target) return target;
+  if (working && timeout > 0) return loader;
+  return fallback;
+}
+
+function LoaderComponent() {
+  return <LoaderRibbon active style={{ position: 'fixed', top: 0, left: 0, right: 0 }} />;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@teambit/react.ui.loader-fallback",
+  "version": "0.0.0-5f312aa95ec8fc788d5968eb3a7bd69db85b7b87",
+  "homepage": "https://bit.cloud/teambit/react/ui/loader-fallback",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.react",
+    "name": "ui/loader-fallback",
+    "version": "5f312aa95ec8fc788d5968eb3a7bd69db85b7b87"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.loader-ribbon": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "@testing-library/react": "^12.1.5",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}