server/src/server.ts

@@ -22,11 +22,8 @@ app.get('/ipad.png', async (req, res) => {
     frontend_url.searchParams.set('tool', req.query.tool);
   }
   await puppet_page.goto(frontend_url.toString());
-  // TODO: handle timeout better (ie present a better error to the frontend)
-  await puppet_page.waitForSelector('#loadingSpinner', {
-    hidden: true,
-    timeout: 10,
-  });
+  // TODO: handle timeout
+  await puppet_page.waitForNetworkIdle({ timeout: 5000 });
   const screenshot = await puppet_page.screenshot();
   await puppet_page.close();
   res.send(screenshot);

src/ipad.ts

@@ -31,19 +31,17 @@ calendarImg.addEventListener('load', () => {
 
 calendarImg.addEventListener('error', (event) => {
   spinner.style.display = 'none';
+  console.error('Error fetching calendar image: ', event);
   errorModal.style.display = '';
   const message = errorModal.querySelector('.modal-message')!;
-  message.textContent = `Failed to fetch events. Displayed events may not be accurate.`;
+  message.textContent = `Failed to fetch events: ${event.message}. Displayed events may not be accurate.`;
 });
 
 function refresh() {
   spinner.style.display = '';
 
   const url = new URL('/ipad.png', window.location.href);
-  url.searchParams.set(
-    'viewport',
-    `${window.innerWidth}x${window.innerHeight}x${window.devicePixelRatio}`
-  );
+  url.searchParams.set('viewport', `${window.innerWidth}x${window.innerHeight}x${window.devicePixelRatio}`);
 
   const urlParams = new URLSearchParams(window.location.search);
   if (urlParams.has('tool')) {