diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bd15d23b4..d4ea52e9ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
# CHANGELOG
+## master
+
+Changes:
+
+- Fix Elapsed formatting (previously would only show s units)
+
+
## 0.87.1 Apr 12, 2021
Contributed:
diff --git a/packages/react-query/src/Elapsed.tsx b/packages/react-query/src/Elapsed.tsx
index dbabee73f8..d22271a623 100644
--- a/packages/react-query/src/Elapsed.tsx
+++ b/packages/react-query/src/Elapsed.tsx
@@ -42,7 +42,7 @@ function formatValue (value: number, type = 's', withDecimal = false): React.Rea
return withDecimal
? <>{before}.
{post}
{type}>
- : <>{before} s>;
+ : <>{before} {type}>;
}
function getDisplayValue (now = 0, value: BN | Date | number = 0): React.ReactNode {
@@ -51,23 +51,18 @@ function getDisplayValue (now = 0, value: BN | Date | number = 0): React.ReactNo
? (value as Date).getTime()
: bnToBn(value as number).toNumber()
) || 0;
- let display = formatValue(0, 's', true);
- if (now && tsValue) {
- const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;
-
- if (elapsed < 15) {
- display = formatValue(elapsed, 's', true);
- } else if (elapsed < 60) {
- display = formatValue(elapsed);
- } else if (elapsed < 3600) {
- display = formatValue(elapsed, 'min');
- } else {
- display = formatValue(elapsed / 3600, 'hr');
- }
+ if (!now || !tsValue) {
+ return formatValue(0, 's', true);
}
- return display;
+ const elapsed = Math.max(Math.abs(now - tsValue), 0) / 1000;
+
+ return (elapsed < 60)
+ ? formatValue(elapsed, 's', elapsed < 15)
+ : (elapsed < 3600)
+ ? formatValue(elapsed, 'min')
+ : formatValue(elapsed / 3600, 'hr');
}
tick();