dynamic progress bar svg skeleton

.gitignore

@@ -12,4 +12,5 @@ obj/
 
 coverage/
 
-appsettings.local.json
+appsettings.local.json
+appsettings.local.*.json

packages/nodes/src/components/controls/solution-status/SolutionStatusBar.tsx

@@ -1,13 +1,16 @@
-import React from 'react'
+import React, { useState, useLayoutEffect, useRef } from 'react'
 import { usePseudoShadow } from '@/views/common/pseudo-shadow'
 import { COLORS } from '@/constants'
 import { useSolutionData } from './hooks'
+import { ProgressBar } from './components'
 
 export const SolutionStatusBar = (): React.ReactElement => {
   const shadowTarget = usePseudoShadow()
 
   const { solutionId: _solutionId } = useSolutionData()
 
+  const [progress, setProgress] = useState(0.5)
+
   return (
     <div
       className="np-flex-grow np-flex np-justify-start np-items-center np-h-8 np-rounded-md np-bg-light np-shadow-main"
@@ -29,8 +32,8 @@ export const SolutionStatusBar = (): React.ReactElement => {
           />
         </svg>
       </div>
-      <div className="np-h-8 np-flex-grow np-pr-2 np-flex np-items-center np-justify-start">
-        <div className="np-w-full np-h-4 np-rounded-sm np-border-2 np-border-dark np-bg-green" />
+      <div className="np-h-4 np-flex-grow np-pr-2 np-flex np-items-center np-justify-start np-overflow-visible">
+        <ProgressBar progress={progress} />
       </div>
     </div>
   )

packages/nodes/src/components/controls/solution-status/components/ProgressBar.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useRef, useLayoutEffect, useEffect } from 'react'
+import { COLORS } from '@/constants'
+
+type ProgressBarProps = {
+  /** A value between 0 & 1 */
+  progress: number
+}
+
+export const ProgressBar = ({ progress }: ProgressBarProps) => {
+  const [progressBarDimensions, setProgressBarDimensions] = useState<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  })
+
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const getContainerDimensions = () => {
+    const element = containerRef.current
+
+    if (!element) {
+      return
+    }
+
+    const { width, height } = element.getBoundingClientRect()
+
+    return { width, height }
+  }
+
+  useLayoutEffect(() => {
+    const containerDimensions = getContainerDimensions() ?? { width: 0, height: 0 }
+
+    console.log({ containerDimensions })
+
+    const { width, height } = containerDimensions
+
+    setProgressBarDimensions({ width: width - 2, height: height - 2 })
+  }, [])
+
+  const { width, height } = progressBarDimensions
+
+  return (
+    <div
+      className="np-w-full np-h-full np-flex np-items-center np-justify-center np-overflow-visible"
+      ref={containerRef}
+    >
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        xmlns="http://www.w3.org/2000/svg"
+        className="np-overflow-visible"
+      >
+        <rect
+          x={0}
+          y={0}
+          rx={2}
+          ry={2}
+          width={width}
+          height={height}
+          stroke={COLORS.DARK}
+          strokeWidth={2}
+          vectorEffect="non-scaling-stroke"
+          fill="none"
+        />
+      </svg>
+    </div>
+  )
+}

packages/nodes/src/components/controls/solution-status/components/index.ts

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar'

packages/nodes/src/store/utils/expireSolution.ts

@@ -18,5 +18,5 @@ export const expireSolution = (state: NodesAppState): void => {
   state.cache.portSolutionData = {}
 
   // Fire registered callback
-  state.callbacks.onExpireSolution?.(state)
+  // state.callbacks.onExpireSolution?.(state)
 }