From 649b8a0da462642421821cef62b03e7519062b48 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Fri, 2 Jan 2026 20:52:07 +0000
Subject: [PATCH] fix: Prevent React app flash by hiding static content with
 display: none

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/public/index.html | 170 ++++++++++++++++++------------------
 1 file changed, 86 insertions(+), 84 deletions(-)

diff --git a/webclient/public/index.html b/webclient/public/index.html
index e108b8f..d4d1d53 100644
--- a/webclient/public/index.html
+++ b/webclient/public/index.html
@@ -32,8 +32,8 @@
 
 		<script>document.documentElement.className = 'js-enabled';</script>
 		<style>
-			.js-enabled #root > * {
-				visibility: hidden;
+			.js-enabled .static-content {
+				display: none;
 			}
 			html {
 				overflow-y: scroll;
@@ -58,97 +58,99 @@
 			})();
 		</script>
 		<div id="root">
-			<div class="container menu">
-				<p>
-					<a href="/">QotNews</a>
-					<br />
-					<span class="slogan">Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
-				</p>
-			</div>
-			{% if story %}
-				<div class="{% if show_comments %}container{% else %}article-container{% endif %}">
-					<div class="article">
-						<h1>{{ story.title }}</h1>
-
-						{% if show_comments %}
-							<div class="info">
-								<a href="/{{ story.id }}">View article</a>
-							</div>
-						{% else %}
-							<div class="info">
-								Source: <a class="source" href="{{ story.url or story.link }}">{{ url }}</a>
-							</div>
-						{% endif %}
-
-						<div class="info">
-							{{ story.score }} points
-							by <a href="{{ story.author_link }}">{{ story.author }}</a>
-							{{ story.date | fromnow }}
-							on <a href="{{ story.link }}">{{ story.source }}</a> |
-							<a href="/{{ story.id }}/c">
-								{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
-							</a>
-						</div>
-
-						{% if not show_comments and story.text %}
-							<div class="story-text">{{ story.text | safe }}</div>
-						{% elif show_comments %}
-							{% macro render_comment(comment, level) %}
-								<dt></dt>
-								<dd class="comment{% if level > 0 %} lined{% endif %}">
-									<div class="info">
-										<p>
-											{% if comment.author == story.author %}[OP] {% endif %}{{ comment.author or '[Deleted]' }} | <a href="#{{ comment.author }}{{ comment.date }}" id="{{ comment.author }}{{ comment.date }}">{{ comment.date | fromnow }}</a>
-										</p>
-									</div>
-									<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
-									{% if comment.comments %}
-										<dl>
-											{% for reply in comment.comments %}
-												{{ render_comment(reply, level + 1) }}
-											{% endfor %}
-										</dl>
-									{% endif %}
-								</dd>
-							{% endmacro %}
-							<dl class="comments">
-								{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
-							</dl>
-						{% endif %}
-					</div>
-					<div class='dot toggleDot'>
-						<div class='button'>
-							<a href="/{{ story.id }}{{ '/c' if not show_comments else '' }}">
-								{{ '' if not show_comments else '' }}
-							</a>
-						</div>
-					</div>
+			<div class="static-content">
+				<div class="container menu">
+					<p>
+						<a href="/">QotNews</a>
+						<br />
+						<span class="slogan">Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
+					</p>
 				</div>
-			{% elif stories %}
-				<div class="container">
-					{% for story in stories %}
-						<div class='item'>
-							<div class='title'>
-								<a class='link' href='/{{ story.id }}'>
-									<img class='source-logo' src='/logos/{{ story.source }}.png' alt='{{ story.source }}:' /> {{ story.title }}
-								</a>
-								<span class='source'>
-									(<a class='source' href='{{ story.url or story.link }}'>{{ story.hostname }}</a>)
-								</span>
-							</div>
-							<div class='info'>
+				{% if story %}
+					<div class="{% if show_comments %}container{% else %}article-container{% endif %}">
+						<div class="article">
+							<h1>{{ story.title }}</h1>
+
+							{% if show_comments %}
+								<div class="info">
+									<a href="/{{ story.id }}">View article</a>
+								</div>
+							{% else %}
+								<div class="info">
+									Source: <a class="source" href="{{ story.url or story.link }}">{{ url }}</a>
+								</div>
+							{% endif %}
+
+							<div class="info">
 								{{ story.score }} points
 								by <a href="{{ story.author_link }}">{{ story.author }}</a>
 								{{ story.date | fromnow }}
 								on <a href="{{ story.link }}">{{ story.source }}</a> |
-								<a class="{{ 'hot' if story.num_comments > 99 else '' }}" href="/{{ story.id }}/c">
+								<a href="/{{ story.id }}/c">
 									{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
 								</a>
 							</div>
+
+							{% if not show_comments and story.text %}
+								<div class="story-text">{{ story.text | safe }}</div>
+							{% elif show_comments %}
+								{% macro render_comment(comment, level) %}
+									<dt></dt>
+									<dd class="comment{% if level > 0 %} lined{% endif %}">
+										<div class="info">
+											<p>
+												{% if comment.author == story.author %}[OP] {% endif %}{{ comment.author or '[Deleted]' }} | <a href="#{{ comment.author }}{{ comment.date }}" id="{{ comment.author }}{{ comment.date }}">{{ comment.date | fromnow }}</a>
+											</p>
+										</div>
+										<div class="text">{{ (comment.text | safe) if comment.text else '<p>[Empty / deleted comment]</p>' }}</div>
+										{% if comment.comments %}
+											<dl>
+												{% for reply in comment.comments %}
+													{{ render_comment(reply, level + 1) }}
+												{% endfor %}
+											</dl>
+										{% endif %}
+									</dd>
+								{% endmacro %}
+								<dl class="comments">
+									{% for comment in story.comments %}{{ render_comment(comment, 0) }}{% endfor %}
+								</dl>
+							{% endif %}
 						</div>
-					{% endfor %}
-				</div>
-			{% endif %}
+						<div class='dot toggleDot'>
+							<div class='button'>
+								<a href="/{{ story.id }}{{ '/c' if not show_comments else '' }}">
+									{{ '' if not show_comments else '' }}
+								</a>
+							</div>
+						</div>
+					</div>
+				{% elif stories %}
+					<div class="container">
+						{% for story in stories %}
+							<div class='item'>
+								<div class='title'>
+									<a class='link' href='/{{ story.id }}'>
+										<img class='source-logo' src='/logos/{{ story.source }}.png' alt='{{ story.source }}:' /> {{ story.title }}
+									</a>
+									<span class='source'>
+										(<a class='source' href='{{ story.url or story.link }}'>{{ story.hostname }}</a>)
+									</span>
+								</div>
+								<div class='info'>
+									{{ story.score }} points
+									by <a href="{{ story.author_link }}">{{ story.author }}</a>
+									{{ story.date | fromnow }}
+									on <a href="{{ story.link }}">{{ story.source }}</a> |
+									<a class="{{ 'hot' if story.num_comments > 99 else '' }}" href="/{{ story.id }}/c">
+										{{ story.num_comments }} comment{{ 's' if story.num_comments != 1 }}
+									</a>
+								</div>
+							</div>
+						{% endfor %}
+					</div>
+				{% endif %}
+			</div>
 		</div>
 		<!--
 			This HTML file is a template.