fix(pdf-server): remove page-loading overlay (#493)

* fix(pdf-server): remove page-loading overlay

The overlay had multiple issues:
- Hardcoded white background broke dark mode
- Could get stuck visible, breaking sizing/layout
- Added little value since previous page stays visible during render
  and the 150ms delay meant most renders completed before it showed

* prettier:fix

examples/pdf-server/src/mcp-app.css

@@ -261,46 +261,6 @@ body {
   --min-font-size-inv: calc(1 / var(--min-font-size, 1));
 }
 
-/* Page Loading Overlay - shown while page data is being fetched */
-.page-loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 4px;
-  z-index: 10;
-}
-
-.page-loading-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.5rem 2rem;
-  background: var(--bg000);
-  border: 1px solid var(--bg200);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.page-loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--bg200);
-  border-top-color: var(--text100);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.page-loading-text {
-  font-size: 0.85rem;
-  color: var(--text100);
-}
 
 .text-layer :is(span, br) {
   color: transparent;

examples/pdf-server/src/mcp-app.ts

@@ -624,9 +624,6 @@ async function renderPage() {
   isRendering = true;
   pendingPage = null;
 
-  // Show loading overlay while page data is being fetched
-  showPageLoadingOverlay();
-
   try {
     const pageToRender = currentPage;
     const page = await pdfDocument.getPage(pageToRender);
@@ -719,7 +716,6 @@ async function renderPage() {
     log.error("Error rendering page:", err);
     showError(`Failed to render page ${currentPage}`);
   } finally {
-    hidePageLoadingOverlay();
     preloadPaused = false;
     isRendering = false;
 
@@ -1013,40 +1009,6 @@ type RangeResult = { bytes: Uint8Array; totalBytes: number };
 const rangeCache = new Map<string, RangeResult>();
 const inflightRequests = new Map<string, Promise<RangeResult>>();
 
-// Page loading overlay state — shown after a delay so cached pages never flash it
-let pageLoadingOverlay: HTMLElement | null = null;
-let pageLoadingTimer: ReturnType<typeof setTimeout> | null = null;
-const PAGE_LOADING_DELAY_MS = 150;
-
-function showPageLoadingOverlay() {
-  if (pageLoadingOverlay || pageLoadingTimer) return; // Already showing or scheduled
-
-  pageLoadingTimer = setTimeout(() => {
-    pageLoadingTimer = null;
-    const overlay = document.createElement("div");
-    overlay.className = "page-loading-overlay";
-    overlay.innerHTML = `
-      <div class="page-loading-content">
-        <div class="page-loading-spinner"></div>
-        <span class="page-loading-text">Loading page...</span>
-      </div>
-    `;
-    canvasContainerEl.appendChild(overlay);
-    pageLoadingOverlay = overlay;
-  }, PAGE_LOADING_DELAY_MS);
-}
-
-function hidePageLoadingOverlay() {
-  if (pageLoadingTimer) {
-    clearTimeout(pageLoadingTimer);
-    pageLoadingTimer = null;
-  }
-  if (pageLoadingOverlay) {
-    pageLoadingOverlay.remove();
-    pageLoadingOverlay = null;
-  }
-}
-
 // Max bytes per server request (must match server's MAX_CHUNK_BYTES)
 const MAX_CHUNK_BYTES = 512 * 1024;
 

package-lock.json

@@ -527,6 +527,9 @@
         "@modelcontextprotocol/sdk": "^1.24.0",
         "zod": "^4.1.13"
       },
+      "bin": {
+        "mcp-server-debug": "dist/index.js"
+      },
       "devDependencies": {
         "@types/cors": "^2.8.19",
         "@types/express": "^5.0.0",