@ninetailed/experience.js-react 2.0.1 → 2.0.2

package/index.esm.js

@@ -2563,11 +2563,54 @@ const useJoinExperiment = ({
   }, [experiences]);
 };
 
+const DefaultExperienceLoadingComponent = _a => {
+  var {
+    component: Component,
+    experiences,
+    unhideAfterMs = 5000
+  } = _a,
+      baseline = __rest(_a, ["component", "experiences", "unhideAfterMs"]);
+
+  const [hidden, setHidden] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setHidden(false);
+    }, unhideAfterMs);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
+  if (hidden) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "hide",
+      style: {
+        opacity: 0
+      }
+    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
+    ninetailed: {
+      isPersonalized: false,
+      audience: {
+        id: 'baseline'
+      }
+    }
+  }));
+};
 const Experience = _a => {
   var {
     experiences,
     component: Component,
-    loadingComponent: LoadingComponent
+    loadingComponent: LoadingComponent = DefaultExperienceLoadingComponent
   } = _a,
       baseline = __rest(_a, ["experiences", "component", "loadingComponent"]);
 
@@ -2600,26 +2643,10 @@ const Experience = _a => {
   }
 
   if (status === 'loading') {
-    if (LoadingComponent) {
-      return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
-        experiences: experiences,
-        component: Component
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      key: "hide",
-      style: {
-        opacity: 0
-      }
-    }, /*#__PURE__*/React.createElement(Component, Object.assign({}, baseline, {
-      ninetailed: {
-        isPersonalized: false,
-        audience: {
-          id: 'baseline'
-        }
-      }
-    })));
+    return /*#__PURE__*/React.createElement(LoadingComponent, Object.assign({}, baseline, {
+      experiences: experiences,
+      component: Component
+    }));
   }
 
   if (!experience) {
@@ -2724,4 +2751,4 @@ const ESRLoadingComponent = _a => {
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, variant));
 };
 
-export { ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };
+export { DefaultExperienceLoadingComponent, ESRLoadingComponent, ESRProvider, Experience, MergeTag, NinetailedProvider, Personalize, TrackHasSeenComponent, useNinetailed, usePersonalize, useProfile };

package/index.umd.js

@@ -2110,23 +2110,69 @@
     }, [experiences]);
   };
 
+  var DefaultExperienceLoadingComponent = function DefaultExperienceLoadingComponent(_a) {
+    var Component = _a.component;
+        _a.experiences;
+        var _b = _a.unhideAfterMs,
+        unhideAfterMs = _b === void 0 ? 5000 : _b,
+        baseline = __rest(_a, ["component", "experiences", "unhideAfterMs"]);
+
+    var _c = React.useState(true),
+        hidden = _c[0],
+        setHidden = _c[1];
+
+    React.useEffect(function () {
+      var timer = setTimeout(function () {
+        setHidden(false);
+      }, unhideAfterMs);
+      return function () {
+        clearTimeout(timer);
+      };
+    }, []);
+
+    if (hidden) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: "hide",
+        style: {
+          opacity: 0
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+        ninetailed: {
+          isPersonalized: false,
+          audience: {
+            id: 'baseline'
+          }
+        }
+      })));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
+      ninetailed: {
+        isPersonalized: false,
+        audience: {
+          id: 'baseline'
+        }
+      }
+    }));
+  };
   var Experience = function Experience(_a) {
     var experiences = _a.experiences,
         Component = _a.component,
-        LoadingComponent = _a.loadingComponent,
+        _b = _a.loadingComponent,
+        LoadingComponent = _b === void 0 ? DefaultExperienceLoadingComponent : _b,
         baseline = __rest(_a, ["experiences", "component", "loadingComponent"]);
 
-    var _b = useExperience({
+    var _c = useExperience({
       baseline: baseline,
       experiences: experiences
     }),
-        status = _b.status,
-        hasVariants = _b.hasVariants,
-        experience = _b.experience,
-        variant = _b.variant,
-        audience = _b.audience,
-        isPersonalized = _b.isPersonalized,
-        profile = _b.profile;
+        status = _c.status,
+        hasVariants = _c.hasVariants,
+        experience = _c.experience,
+        variant = _c.variant,
+        audience = _c.audience,
+        isPersonalized = _c.isPersonalized,
+        profile = _c.profile;
 
     var joinExperiment = useJoinExperiment({
       experiences: experiences
@@ -2145,26 +2191,10 @@
     }
 
     if (status === 'loading') {
-      if (LoadingComponent) {
-        return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, __assign({}, baseline, {
-          experiences: experiences,
-          component: Component
-        }));
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: "hide",
-        style: {
-          opacity: 0
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, baseline, {
-        ninetailed: {
-          isPersonalized: false,
-          audience: {
-            id: 'baseline'
-          }
-        }
-      })));
+      return /*#__PURE__*/React__default["default"].createElement(LoadingComponent, __assign({}, baseline, {
+        experiences: experiences,
+        component: Component
+      }));
     }
 
     if (!experience) {
@@ -2268,6 +2298,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, variant));
   };
 
+  exports.DefaultExperienceLoadingComponent = DefaultExperienceLoadingComponent;
   exports.ESRLoadingComponent = ESRLoadingComponent;
   exports.ESRProvider = ESRProvider;
   exports.Experience = Experience;

package/lib/Experience/Experience.d.ts

@@ -18,6 +18,11 @@ export declare type ExperienceProps<P extends Baseline> = ExperienceBaseProps<P>
     component: ExperienceComponent<P> | React.ComponentType<P>;
     loadingComponent?: ExperienceLoadingComponent<P>;
 };
+declare type DefaultExperienceLoadingComponentProps = ExperienceBaseProps & {
+    unhideAfterMs?: number;
+};
+export declare const DefaultExperienceLoadingComponent: React.FC<DefaultExperienceLoadingComponentProps>;
 export declare const Experience: <P extends {
     id: string;
 }>({ experiences, component: Component, loadingComponent: LoadingComponent, ...baseline }: ExperienceProps<P>) => JSX.Element;
+export {};

package/lib/Experience/index.d.ts

@@ -1,3 +1,3 @@
-export { Experience } from './Experience';
-export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';
+export { Experience, DefaultExperienceLoadingComponent } from './Experience';
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent } from './Experience';
 export { ESRProvider, ESRLoadingComponent } from './ESRLoadingComponent';

package/lib/index.d.ts

@@ -9,5 +9,5 @@ export { Personalize } from './Personalize';
 export type { PersonalizedComponent } from './Personalize';
 export { MergeTag } from './MergeTag';
 export { TrackHasSeenComponent } from './TrackHasSeenComponent';
-export { Experience, ESRProvider, ESRLoadingComponent } from './Experience';
+export { Experience, ESRProvider, ESRLoadingComponent, DefaultExperienceLoadingComponent } from './Experience';
 export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -8,9 +8,9 @@
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
     "lodash": "^4.17.21",
-    "@ninetailed/experience.js": "2.0.1",
+    "@ninetailed/experience.js": "2.0.2",
     "analytics": "^0.8.0",
-    "@ninetailed/experience.js-shared": "2.0.1",
+    "@ninetailed/experience.js-shared": "2.0.2",
     "uuid": "^8.3.2",
     "ts-toolbelt": "^9.6.0",
     "locale-enum": "^1.1.1",