@@ -1,10 +1,11 @@
1−import React, { useState } from 'react';
1+import React, { useState, useRef } from 'react';
22
33import useInterval from 'lib/useInterval';
44
55// TODO: make these characters display as the same width
66export const kLoadingCharacter = '▓';
77export const kInterstitialCharacter = '░';
8+const kBlinkAfterMs = 2500; // ms
89
910export const matchBlinky = obj =>
1011 obj.matchWith({
@@ -17,7 +18,14 @@ export default function Blinky({
1718 b = kInterstitialCharacter,
1819}) {
1920 const [value, setValue] = useState(true);
20− useInterval(() => setValue(val => !val), 1000);
21+ const now = useRef(new Date());
22+
23+ useInterval(() => {
24+ // only start blinking if we've elapsed enough time
25+ if (new Date() - now.current > kBlinkAfterMs) {
26+ setValue(val => !val);
27+ }
28+ }, 1000);
2129
2230 return value ? a : b;
2331}