From f089a04ef463f98be0260dea9a57024717f73431 Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Tue, 25 Jul 2023 10:55:42 +0900
Subject: [PATCH] feat: animation disable when diff > 200

---
 islands/StockList.tsx | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/islands/StockList.tsx b/islands/StockList.tsx
index 7aad411..8636fbd 100644
--- a/islands/StockList.tsx
+++ b/islands/StockList.tsx
@@ -1,5 +1,5 @@
 import { Button } from "../components/Button.tsx";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useLayoutEffect } from "preact/hooks";
 import { ComponentChildren } from "preact";
 import { Signal, useSignal } from "@preact/signals";
 import { IS_BROWSER } from "$fresh/runtime.ts";
@@ -91,15 +91,39 @@ interface CorpSimple {
 function StockListByDate({prevSet, rows, name}:{prevSet:Set<string>, 
   rows:Coperation[],
 name: string}){
+  const lastCount = useRef(rows.length);
+  const curCount = rows.length;
   const parent = useRef<HTMLDivElement>(null);
+  const controller = useRef<{
+    isEnabled: ()=> boolean,
+    disable: ()=>void,
+    enable: ()=> void
+  }| undefined>();
   useEffect(()=>{
     (async ()=>{
       console.log("animation mount on ",name);
       const {default:autoAnimate} = await import("https://esm.sh/@formkit/auto-animate@0.7.0");
-      parent.current && autoAnimate(parent.current)
+      if (parent.current){
+        const cntr = autoAnimate(parent.current);
+        controller.current = cntr;
+      }
     })();
   },[parent]);
 
+  useLayoutEffect(()=>{
+    if (controller.current){
+      if (Math.abs(curCount - lastCount.current) > 200){
+        console.log('disable animation', curCount, "from",  lastCount.current);
+        controller.current.disable();
+      }
+      else {
+        console.log('enable animation', curCount, "from",  lastCount.current);
+        controller.current.enable();
+      }
+      lastCount.current = curCount;
+    }
+  }, [parent, rows]);
+
   return <div ref={parent}>
   <h2 class="text-lg">{name}</h2>
   {rows.map((row) => {
@@ -109,7 +133,7 @@ name: string}){
         key={row.Code}
         class={[
           "bg-white",
-          firstOccur ? "text-[#ff5454]" : "text-black",
+          firstOccur ? "text-[#ff5454] underline" : "text-black",
         ].join(" ")}
       >
         <a href={`https://stockplus.com/m/stocks/KOREA-A${row.Code}`}>