fix: more smooth logics when preview unavailable

src/TransformGridItem/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "../Transforms/Transform";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import { AnimatePresence, motion } from "framer-motion";
+import { Tooltip } from 'react-tooltip'
 
 interface TransformGridItemProp {
   transform: WrappedTransform
@@ -45,7 +46,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   }, [])
   
   useEffect(() => {
-    if (closed)
+    if (previewDisabled)
       return
 
     triggerTransform()
@@ -55,6 +56,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
     if (value.length > 30000) {
       setClosed(true)
       setPreviewDisabled(true)
+      setResult({
+        error: false,
+        value: ''
+      })
       return
     }
 
@@ -138,9 +143,18 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   return (
     <div className={clsx(style.item, closed && style.closed)}>
       <div className={style.toolbar}>
-        <Button disabled={result.error} onClick={onForwardButtonPressed}>
-          &lt;&lt;&lt;
-        </Button>
+        <div data-tooltip-id={`${transform.name}-tooltip`}>
+          <Button
+            disabled={result.error}
+            onClick={onForwardButtonPressed}>
+
+            &lt;&lt;&lt;
+          </Button>
+        </div>
+
+        <Tooltip id={`${transform.name}-tooltip`} place="bottom">
+          {previewDisabled && result.error && result.value}
+        </Tooltip>
         
         <h2
           onClick={onLabelClicked}

src/TransformGridItem/style.module.scss

@@ -29,7 +29,7 @@
       padding: 14px 2px;
       gap: 10px;
       height: 100%;
-      overflow-x: scroll;
+      overflow-x: auto;
       scrollbar-width: thin;
       scrollbar-color: gray #323232;
       align-items: center;

src/main.tsx

@@ -1,7 +1,9 @@
 import { StrictMode } from 'react'
+import { RecoilRoot } from 'recoil'
 import { createRoot } from 'react-dom/client'
 
 import 'normalize.css/normalize.css'
+import 'react-tooltip/dist/react-tooltip.css'
 import '@fontsource-variable/jetbrains-mono/index.css'
 
 // ---
@@ -9,7 +11,6 @@ import '@fontsource-variable/jetbrains-mono/index.css'
 import './main.css'
 import { App } from './App'
 import { LandingAnimation } from './LandingAnimation'
-import { RecoilRoot } from 'recoil'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>