feat(blog/nuldoc): show static icon image until dynamic icon canvas is ready in /about/ page

1 files changed, 6 insertions, 2 deletions

diff --git a/vhosts/blog/public/my-icon.js b/vhosts/blog/public/my-icon.js
index 13086daf..52990cc5 100644
--- a/vhosts/blog/public/my-icon.js
+++ b/vhosts/blog/public/my-icon.js
@@ -25,8 +25,7 @@ const init = () => {
   canvas.height = SIZE * DPR;
   canvas.style.width = `${SIZE}px`;
   canvas.style.height = `${SIZE}px`;
-  container.appendChild(canvas);
-  const ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
   ctx.scale(DPR, DPR);
 
   let frameCount = 0;
@@ -166,7 +165,12 @@ const init = () => {
 
     setTimeout(mainLoop, 1000 / FPS);
   }
+
   mainLoop();
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+  container.appendChild(canvas);
 };
 
 document.addEventListener("DOMContentLoaded", init);