@theorem/react - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 3.3.0
+
+- Spinner: delayed prop
+
 # 3.2.1
@@ -2,0 +6,0 @@

dist/Spinner/index.d.ts

 import { ReactNode } from "react";
 declare type Props = {
     children?: ReactNode;
+    delayed?: boolean;
     fullScreen?: boolean;
@@ -5,0 +6,0 @@ timeoutMs?: number;

dist/Spinner/index.js

@@ -12,28 +12,36 @@ var __assign = (this && this.__assign) || function () {
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import NanoSpinner from "react-nano-spinner";
-import { useRerenderEvery } from "../useRerender";
+import { useRerender, useRerenderEvery } from "../useRerender";
+var delayedTimeout = 1000;
 export function Spinner(props) {
-    var children = props.children, fullScreen = props.fullScreen, timeoutMs = props.timeoutMs;
+    var children = props.children, delayed = props.delayed, fullScreen = props.fullScreen, timeoutMs = props.timeoutMs;
     var contents = children || _jsx(NanoSpinner, {}, void 0);
     useRerenderEvery(1000);
+    var rerender = useRerender();
     var mountedAt = useState(Date.now())[0];
+    useEffect(function () {
+        var timer = setTimeout(rerender, delayedTimeout + 1);
+        return function () { return clearTimeout(timer); };
+    }, [rerender]);
     var timeout = timeoutMs !== null && timeoutMs !== void 0 ? timeoutMs : 60000;
     if (mountedAt + timeout < Date.now())
         throw new Error("Spinner is taking too long");
-    if (fullScreen) {
-        return (_jsx("div", __assign({ style: {
-                alignItems: "center",
-                bottom: 0,
-                display: "flex",
-                justifyContent: "center",
-                left: 0,
-                position: "absolute",
-                right: 0,
-                top: 0,
-                zIndex: 2,
-            } }, { children: _jsx("div", { children: contents }, void 0) }), void 0));
-    }
-    return _jsx(_Fragment, { children: contents }, void 0);
+    var hiddenDueToDelay = delayed && Date.now() < mountedAt + delayedTimeout;
+    var delayedStyles = hiddenDueToDelay ? { opacity: 0 } : {};
+    var fullScreenStyles = fullScreen
+        ? {
+            alignItems: "center",
+            bottom: 0,
+            display: "flex",
+            justifyContent: "center",
+            left: 0,
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: 2,
+        }
+        : {};
+    return (_jsx("div", __assign({ style: __assign(__assign({}, fullScreenStyles), delayedStyles) }, { children: contents }), void 0));
 }

package.json

 {
   "name": "@theorem/react",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Theorem React tools",
@@ -21,3 +21,3 @@ "peerDependencies": {
   "dependencies": {
-    "@types/color-convert": "^1.9.0",
+    "@types/color-convert": "^2.0.0",
     "color-convert": "^2.0.1",
@@ -34,6 +34,6 @@ "parse-css-color": "^0.1.2",
     "eslint": "^7.14.0",
-    "prettier": "^2.2.0",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-test-renderer": "^17.0.1",
-    "ts-node": "^9.0.0",
+    "ts-node": "^9.1.0",
     "typescript": "^4.1.2"
@@ -40,0 +40,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

47354

increased by0.87%

Lines of code

1105

increased by0.82%

Dependency changes

• + Added@types/color-convert@2.0.4(transitive)

• + Added@types/color-name@1.1.5(transitive)

• - Removed@types/color-convert@1.9.0(transitive)

• - Removed@types/color-name@2.0.0(transitive)

• Updated@types/color-convert@^2.0.0