feat(scenes): allow SplashScene to work with observable delays

src/scenes/Splash/index.d.ts

@@ -5,6 +5,7 @@ import { MaybeObservable } from 'types';
 
 export interface Props extends RouteComponentProps {
   redirectTo: MaybeObservable<string>;
+  redirectDelay: MaybeObservable<number>;
 }
 
-export interface Component extends FunctionComponent<Props> {}
+export interface Component extends FunctionComponent<Props> { }

src/scenes/Splash/index.js

@@ -5,7 +5,6 @@
  */
 import * as React from 'karet';
 import * as U from 'karet.util';
-import * as K from 'kefir';
 
 import * as T from './index.d';
 import styles from './index.module.scss';
@@ -17,22 +16,27 @@ import logo from 'assets/logo.svg';
  * @param {T.Props} props
  * @return {T.Component}
  */
-function SplashScene({ redirectTo, history }) {
-  const redirectDelay = K.later(5000).toProperty();
+function SplashScene({ redirectTo, redirectDelay = 2000, history }) {
+  const delay = U.thru(
+    redirectDelay,
+    U.flatMapLatest(n => U.later(n, null)),
+    U.toProperty,
+  );
 
   const redirectEff = U.thru(
-    U.combine([redirectTo, redirectDelay], takeAll),
-    U.consume(([path]) => {
-      history.replace(path);
-    }),
+    U.combine([redirectTo, delay], takeAll),
+    U.consume(([path]) => history.replace(path)),
   );
 
-  const sinkEff = U.sink(U.parallel([redirectEff]));
+  const sinkEff = U.sink(redirectEff);
 
   return (
     <div className={U.cns('scene-root', styles.root)} data-scene-name="splash">
       <>{sinkEff}</>
-      <img src={logo} className={styles.logo} alt="pixel" />
+      <div className={styles.logo}>
+        <img src={logo} alt="pixel" />
+        <h1>pixel</h1>
+      </div>
     </div>
   );
 }

src/scenes/Splash/index.module.scss

@@ -5,6 +5,7 @@
   position: absolute;
   left: 50%;
   top: 50%;
+  text-align: center;
   transform-origin: center center;
   transform: translateX(-50%) translateY(-50%) scale(0.7);
 }