fix: no flashing color between states at low duration

src/renderer.ts

@@ -12,18 +12,6 @@ enum State {
   EXHALE,
   POST_EXHALE,
 }
-function progressState(state: State): State {
-  switch (state) {
-    case State.INHALE:
-      return State.POST_INHALE;
-    case State.POST_INHALE:
-      return State.EXHALE;
-    case State.EXHALE:
-      return State.POST_EXHALE;
-    case State.POST_EXHALE:
-      return State.INHALE;
-  }
-}
 const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 const ctx = canvas.getContext("2d");
@@ -59,6 +47,23 @@ const {
   colorPause,
 } = storedValues;
 
+const stateAfterInhale: State =
+  durationPostInhale > 0 ? State.POST_INHALE : State.EXHALE;
+const stateAfterExhale: State =
+  durationPostExhale > 0 ? State.POST_EXHALE : State.INHALE;
+function progressState(state: State): State {
+  switch (state) {
+    case State.INHALE:
+      return stateAfterInhale;
+    case State.POST_INHALE:
+      return State.EXHALE;
+    case State.EXHALE:
+      return stateAfterExhale;
+    case State.POST_EXHALE:
+      return State.INHALE;
+  }
+}
+
 let state = State.INHALE;
 let startFrame = 0;
 let endFrame = 0;