hacky workaround for spinning

SchramlTim · Jun 12, 2024 · c7f5e09 · c7f5e09
1 parent eb18d13
commit c7f5e09
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/src/components/statusicon/index.jsx b/src/components/statusicon/index.jsx
@@ -22,8 +22,6 @@ const statusMapping = {
 
 const StatusIcon = (props) => {
 
-  console.log(statusMapping[props.status])
-
   const coloredSteps = new Array(statusMapping[props.status]?.count || 0).fill(null).map(() => { 
     return <li className={`w-1/6 h-1 rounded ${statusMapping[props.status]?.color}`}></li>
   }) 
@@ -32,21 +30,21 @@ const StatusIcon = (props) => {
     return <li className={`w-1/6 h-1 rounded bg-gray-500`}></li>
   }) 
 
-    return (
-      <i className={`flex flex-col gap-1 w-full items-center text-xs ${props.className || ''}`}>
-        <StackIcon name={props.name} className="aspect-square" /> 
-        <span>{props.name}</span>
-        {props.status &&
-          <>
-            <ol className="flex flex-row justify-between w-2/3">
-              {coloredSteps}
-              {graySteps}
-            </ol>
-            <span className="text-center text-[0.5rem] leading-3">{props.status}</span>
-          </>
-        }
-      </i>
-    )
+  return (
+    <i className={`flex flex-col gap-1 w-full items-center text-xs ${props.className || ''}`}>
+      <StackIcon name={props.name} className="aspect-square" /> 
+      <span>{props.name}</span>
+      {props.status &&
+        <>
+          <ol className="flex flex-row justify-between w-2/3">
+            {coloredSteps}
+            {graySteps}
+          </ol>
+          <span className="text-center text-[0.5rem] leading-3">{props.status}</span>
+        </>
+      }
+    </i>
+  )
 }
 
 export {

diff --git a/src/solutions/avatar/index.jsx b/src/solutions/avatar/index.jsx
@@ -11,6 +11,8 @@ function easeOutCirc(x) {
 const Avatar = () => {
   const refContainer = useRef(null);
   const refRenderer = useRef()
+  const refFrame = useRef(0)
+  let frame = 0
 
   const handleWindowResize = useCallback(() => {
     const { current: renderer } = refRenderer
@@ -93,7 +95,6 @@ const Avatar = () => {
           }
       )
       let req = null
-      let frame = 0
       const animate = () => {
         req = requestAnimationFrame(animate)
 
@@ -129,10 +130,16 @@ const Avatar = () => {
     }
   }, [handleWindowResize])
 
-  //return (<div></div>)
+
+  const trigger = () => {
+    frame = 0 
+  }
 
   return (
-    <div className={'w-full'} ref={refContainer}></div>
+    <div className='w-full h-full relative'>
+      <div className="absolute inset-0" onClick={() => trigger()}>Bla</div>
+      <div className={'w-full'} ref={refContainer}></div>
+    </div>
   );
 }