feat: loading for canvas

firejune · Nov 7, 2023 · f50fac7 · f50fac7
1 parent e2f8ea2
commit f50fac7
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/public/canvas-loading-dark.png b/public/canvas-loading-dark.png
diff --git a/public/canvas-loading-light.png b/public/canvas-loading-light.png
diff --git a/src/app/[username]/Canvas.tsx b/src/app/[username]/Canvas.tsx
@@ -14,6 +14,9 @@ const defaultBoxMargin = 3
 const defaultBorderRadius = 2
 const scaleFactor = 3
 
+const empty =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+
 const Canvas = ({
   data,
   username,
@@ -22,16 +25,15 @@ const Canvas = ({
   options: { boxMargin = defaultBoxMargin, showWeekDays = true, showFooter = true, ...options } = {},
 }: ChartProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
-  const imgRef = useRef<HTMLImageElement>(null)
-  const [url, setUrl] = useState(`/canvas-loading-${scheme}.png`)
+  const [url, setUrl] = useState(empty)
   const [scale, setScale] = useState(1)
 
   const textWidth = showWeekDays ? 28 + boxMargin : 0
   const footerHeight = showFooter ? textHeight : 0
   const graphHeight = footerHeight + (boxSize + boxMargin) * 8 + canvasMargin
   const height = graphHeight + canvasMargin + 5
   const width = data.length * (boxSize + boxMargin) + canvasMargin + textWidth
-  const handleResize = () => imgRef.current && setScale(imgRef.current.offsetWidth / width)
+  const handleResize = () => canvasRef.current && setScale(canvasRef.current.offsetWidth / width)
 
   useEffect(() => {
     if (canvasRef.current) {
@@ -58,12 +60,13 @@ const Canvas = ({
 
   return (
     <>
-      <img useMap="#info" width={width} height={height} src={url} alt="" ref={imgRef} />
+      <img useMap="#info" width={width} height={height} src={url} alt="" />
+
       <map name="info">
         {data.map((week, x) => (
           <Fragment key={x}>
             {week.map((day, y) => {
-              const left = canvasMargin + (boxSize + boxMargin) * x
+              const left = canvasMargin + textWidth + (boxSize + boxMargin) * x
               const top = canvasMargin + textHeight + (boxSize + boxMargin) * y
               const starts = [left * scale, top * scale]
               const ends = [(left + boxSize) * scale, (top + boxSize) * scale]

diff --git a/src/app/[username]/loading.tsx b/src/app/[username]/loading.tsx
@@ -12,7 +12,6 @@ import differenceInCalendarWeeks from 'date-fns/differenceInCalendarWeeks'
 const FALSY = ['0', 'false', 'hide', 'hidden', 'none']
 const DATE_FORMAT = 'yyyy-MM-dd'
 import Chart, { Contrib } from './Chart'
-import Canvas from './Canvas'
 
 export default function ChartPage() {
   const params = useParams()
@@ -43,9 +42,8 @@ export default function ChartPage() {
     ...(searchParams.get('margin') ? { boxMargin: Number(searchParams.get('margin')) } : {}),
   }
 
-  const Element = params.element === 'canvas' ? Canvas : Chart
   return (
-    <Element
+    <Chart
       data={graphEntries}
       username={params.username as string}
       scheme={searchParams.get('scheme') as 'light' | 'dark'}