[ts] add slow gallery problem

2BAD · Aug 23, 2024 · 5701905 · 5701905
1 parent 2987ecd
commit 5701905
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/source/routes/index.ts b/source/routes/index.ts
@@ -6,6 +6,7 @@ import ping from './load/ping.ts'
 import time from './load/time.ts'
 import limitedConnectionsPool from './problems/connectionsPool.ts'
 import slowImage from './problems/slowImage.ts'
+import slowImageGallery from './problems/slowImageGallery.ts'
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 const routes: FastifyPluginAsync = async (fastify: FastifyInstance) => {
@@ -16,6 +17,7 @@ const routes: FastifyPluginAsync = async (fastify: FastifyInstance) => {
   void fastify.register(time)
   void fastify.register(limitedConnectionsPool)
   void fastify.register(slowImage)
+  void fastify.register(slowImageGallery)
 }
 
 export default routes
diff --git a/source/routes/problems/slowImageGallery.ts b/source/routes/problems/slowImageGallery.ts
@@ -0,0 +1,48 @@
+import type { FastifyPluginAsync } from 'fastify'
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+export const imageGalleryRoute: FastifyPluginAsync = async (fastify) => {
+  fastify.get('/problems/slow-image-gallery', async (_, reply) => {
+    const html = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Slow Loading Image Gallery</title>
+        <style>
+          body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
+          .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
+          .image-container { position: relative; height: 200px; background-color: #f0f0f0; }
+          .image-container img { width: 100%; height: 100%; object-fit: cover; }
+          .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+        </style>
+      </head>
+      <body>
+        <h1>Slow Loading Image Gallery</h1>
+        <div class="gallery">
+          ${ Array.from({length: 9}).map((_, i) => i + 1).map(i => `
+            <div class="image-container">
+              <div class="loading">Loading...</div>
+              <img src="/problems/slow-image?complexity=${i}" alt="Slow image ${i}" loading="lazy" onload="this.previousElementSibling.style.display='none';">
+            </div>
+          `).join('')}
+        </div>
+        <script>
+          document.addEventListener('DOMContentLoaded', () => {
+            const images = document.querySelectorAll('img');
+            images.forEach(img => {
+              img.addEventListener('load', () => {
+                console.log(\`Image loaded: \${img.alt}\`);
+              });
+            });
+          });
+        </script>
+      </body>
+      </html>
+    `
+    await reply.type('text/html').send(html)
+  })
+}
+
+export default imageGalleryRoute