@rpcbase/ui 0.6.0 → 0.8.0

package/.wireit/6170706c792d76657273696f6e/fingerprint

@@ -1 +1 @@
-{"fullyTracked":true,"platform":"linux","arch":"x64","nodeVersion":"v18.19.0","command":"node ../../scripts/prflow/apply-prerelease-versions.js $BRANCH_NAME","extraArgs":[],"clean":true,"files":{"/home/runner/work/rpcbase/rpcbase/pkg/ui/package.json":"2b271a3d33b42be017a114c7a5a01aa8e17e2ad0ded5778d5a8de712e26528e9","/home/runner/work/rpcbase/rpcbase/pkg/ui/yarn.lock":"38df2378ed26e20124d8c38a945af1b4a058656aab3b3b1f71a9d8a629cc0d81","/home/runner/work/rpcbase/rpcbase/yarn.lock":"6418e6930bf35b3c31e73c88c6bf21b0f4033a3a8a4e6470477cdf77088e96f1"},"output":[],"dependencies":{},"env":{"BRANCH_NAME":"master"}}
+{"fullyTracked":true,"platform":"linux","arch":"x64","nodeVersion":"v18.19.0","command":"node ../../scripts/prflow/apply-prerelease-versions.js $BRANCH_NAME","extraArgs":[],"clean":true,"files":{"/home/runner/work/rpcbase/rpcbase/pkg/ui/package.json":"efc8b09ccdc79eff629ffb50fab4515c9d2ce9eee4fc99b0643145d17e6541f9","/home/runner/work/rpcbase/rpcbase/pkg/ui/yarn.lock":"38df2378ed26e20124d8c38a945af1b4a058656aab3b3b1f71a9d8a629cc0d81","/home/runner/work/rpcbase/rpcbase/yarn.lock":"6418e6930bf35b3c31e73c88c6bf21b0f4033a3a8a4e6470477cdf77088e96f1"},"output":[],"dependencies":{},"env":{"BRANCH_NAME":"master"}}

package/LottiePlayer/LottiePlayer.js

@@ -0,0 +1,4 @@
+/* @flow */
+import {Player} from "@rpcbase/lottie"
+
+export default Player

package/LottiePlayer/index.js

@@ -0,0 +1,8 @@
+/* @flow */
+import withSuspense from "../withSuspense"
+
+
+export default withSuspense(
+  () => import(/* webpackChunkName: "lottie-player" */ "./LottiePlayer"),
+  {hideLoader: true},
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "license": "SSPL-1.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/withSuspense/index.js

@@ -0,0 +1,40 @@
+/* @flow */
+import React, {Suspense, useEffect, useState} from "react"
+
+import ActivityIndicator from "../ActivityIndicator"
+
+
+const DELAY_BEFORE_LOADER = 200
+
+const withSuspense = (loadFn, opts = {hideLoader: false}) => {
+  const Component = React.lazy(loadFn)
+
+  const Loader = () => {
+    const [showLoader, setShowLoader] = useState(false)
+
+    useEffect(() => {
+      setTimeout(() => {
+        setShowLoader(true)
+      }, DELAY_BEFORE_LOADER)
+    }, [])
+
+    if (!showLoader || opts.hideLoader) return null
+
+    return (
+      <div className="d-flex flex-column h-100 justify-content-center align-items-center">
+        <div className="mb-2">Loading...</div>
+        <ActivityIndicator />
+      </div>
+    )
+  }
+
+  const Wrapper = React.forwardRef((props, ref) => (
+    <Suspense fallback={<Loader />}>
+      <Component ref={ref} {...props} />
+    </Suspense>
+  ))
+
+  return Wrapper
+}
+
+export default withSuspense