\n \n {/* Pages container with page divider */}\n

\n {vals.map((val, index) => {\n // Only load iframes that are in visible range (current + adjacent)\n const isInRange = index >= visibleRange[0] && index <= visibleRange[1];\n const shouldRender = isInRange || loadedValsRef.current.has(val.id);\n const isActive = index === currentIndex;\n \n if (!shouldRender) return null;\n \n return (\n \n {/* Top divider line */}\n

\n \n

\n {/* Show loading state while iframe loads */}\n {loading[val.id] && (\n

\n )}\n \n handleIframeLoad(val.id)}\n onError={() => handleIframeError(val.id)}\n />\n

\n \n {/* Bottom divider line */}\n

\n );\n })}\n

\n \n {/* Tap overlay - only shows in swipe mode with no background */}\n {!isInteractMode && (\n

\n Tap Anywhere\n

\n )}\n \n {/* Navigation buttons - Animated to transform between states */}\n

\n {isInteractMode ? (\n \n ‹\n \n ) : (\n \n ✕\n \n )}\n

\n \n {/* Swipe indicator - tiktok/instagram style at bottom edge */}\n {!isInteractMode && showSwipeIndicator && vals.length > 1 && (\n

\n SWIPE\n

▼

\n )}\n \n {/* Pagination dots - only visible in swipe mode */}\n {!isInteractMode && (\n

\n {vals.map((val, index) => (\n {\n if (!isTransitioning && index !== currentIndex) {\n setCurrentIndex(index);\n setIsTransitioning(true);\n setTimeout(() => setIsTransitioning(false), 500);\n }\n }}\n />\n ))}\n

\n )}\n \n {/* Debug overlay - only visible during development */}\n {false && (\n

{debugInfo}

\n )}\n \n \n );\n}\n\nexport default SwipeViewer;","deleted","label",[177,178,159],"frontend","components","permalink","https://www.val.town/x/dcm31/buildDotMoi/code/frontend/components/SwipeViewer.tsx","extension","actionData","errors"]