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

4 files changed, 18 insertions, 13 deletions

diff --git a/vhosts/blog/nuldoc-src/pages/AboutPage.tsx b/vhosts/blog/nuldoc-src/pages/AboutPage.tsx
index 1fe6adac..3d6583a4 100644
--- a/vhosts/blog/nuldoc-src/pages/AboutPage.tsx
+++ b/vhosts/blog/nuldoc-src/pages/AboutPage.tsx
@@ -25,15 +25,14 @@ export default function AboutPage(
             <header className="post-header">
               <h1 className="post-title">nsfisis</h1>
               <div className="my-icon">
-                <div id="myIcon" />
+                <div id="myIcon">
+                  <img src="/favicon.svg" />
+                </div>
                 <StaticScript
                   fileName="/my-icon.js"
                   defer="true"
                   config={config}
                 />
-                <noscript>
-                  <img src="/favicon.svg" />
-                </noscript>
               </div>
             </header>
             <div className="post-content">
diff --git a/vhosts/blog/public/about/index.html b/vhosts/blog/public/about/index.html
index dd90ed32..f9731523 100644
--- a/vhosts/blog/public/about/index.html
+++ b/vhosts/blog/public/about/index.html
@@ -43,13 +43,11 @@
           <h1 class="post-title">nsfisis</h1>
           <div class="my-icon">
             <div id="myIcon">
-            </div>
-            <script defer src="/my-icon.js?h=bfcf9a771ec584b2040bf1e787a021d0">
-            </script>
-            <noscript>
               <img src="/favicon.svg">
               </img>
-            </noscript>
+            </div>
+            <script defer src="/my-icon.js?h=80ee73b48e0232e49741ade809602e6f">
+            </script>
           </div>
         </header>
         <div class="post-content">
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);
diff --git a/vhosts/blog/static/my-icon.js b/vhosts/blog/static/my-icon.js
index 13086daf..52990cc5 100644
--- a/vhosts/blog/static/my-icon.js
+++ b/vhosts/blog/static/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);