Skip to content

fix(ui): uncomment .hidden CSS rule to prevent FOUC on tab panels#3058

Merged
crivetimihai merged 1 commit intomainfrom
fix/issue-2933-fouc-hidden-css-clean
Feb 20, 2026
Merged

fix(ui): uncomment .hidden CSS rule to prevent FOUC on tab panels#3058
crivetimihai merged 1 commit intomainfrom
fix/issue-2933-fouc-hidden-css-clean

Conversation

@suciu-daniel
Copy link
Copy Markdown
Collaborator

Description

Uncommented the .hidden { display: none; } rule in admin.css that was causing a Flash of Unstyled Content (FOUC) on page load.

Problem

Until Tailwind CSS loads via CDN/JIT, the hidden class had no effect, causing all tab panels to be briefly visible. This was especially noticeable with the ToolOps panel which has hx-trigger="load" and starts fetching content immediately.

Solution

Uncommented the CSS rule at lines 169-171 in mcpgateway/static/admin.css to provide immediate styling before Tailwind loads.

Testing

  • Verified that the .hidden class is used extensively throughout admin.html (161 occurrences)
  • The fix ensures all hidden elements remain hidden during page load

Closes #2933

@crivetimihai crivetimihai added ui User Interface SHOULD P2: Important but not vital; high-value items that are not crucial for the immediate release labels Feb 19, 2026
Copy link
Copy Markdown
Member

@crivetimihai crivetimihai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minimal and correct. Confirmed during triage of #2933 — the commented-out rule was the root cause of the FOUC since Tailwind's .hidden utility has no effect until the CDN/JIT compiler runs. Once Tailwind loads, both rules are display: none (no !important conflict).

@crivetimihai crivetimihai added this to the Release 1.0.0-GA milestone Feb 20, 2026
@crivetimihai crivetimihai added the bug Something isn't working label Feb 20, 2026
Uncommented the .hidden { display: none; } rule in admin.css that was
causing a Flash of Unstyled Content (FOUC) on page load. Until Tailwind
CSS loads via CDN/JIT, the hidden class had no effect, causing all tab
panels to be briefly visible. This was especially noticeable with the
ToolOps panel which has hx-trigger="load" and starts fetching content
immediately.

Closes #2933

Signed-off-by: SuciuDaniel <Daniel.Vasile.Suciu@ibm.com>
@crivetimihai crivetimihai force-pushed the fix/issue-2933-fouc-hidden-css-clean branch from 7d75f1a to f11f105 Compare February 20, 2026 19:07
@crivetimihai
Copy link
Copy Markdown
Member

Review Changes

Rebased onto main and reviewed.

Triage

  • Added bug label
  • Set milestone to Release 1.0.0-GA

Review

  • Verified the .hidden CSS rule is used 192 times across 15 HTML template files — all benefit from FOUC prevention
  • No specificity conflict with Tailwind's .hidden utility (same declaration: display: none)
  • Responsive patterns like hidden lg:block are unaffected — they require Tailwind to load regardless, and the brief hidden state is strictly better than flashing visible content
  • No security, performance, or logic concerns
  • Commit message is clean and properly signed

Fixes

  • None needed — the PR is clean and correct as-is

Tests

  • Pure CSS change (2 lines) — no testable Python code modified

PR looks good to merge.

@suciu-daniel — nice catch on the FOUC issue. The fix is minimal and correct.

@crivetimihai crivetimihai merged commit 1c88d94 into main Feb 20, 2026
53 of 54 checks passed
@crivetimihai crivetimihai deleted the fix/issue-2933-fouc-hidden-css-clean branch February 20, 2026 19:14
vishu-bh pushed a commit that referenced this pull request Feb 24, 2026
)

Uncommented the .hidden { display: none; } rule in admin.css that was
causing a Flash of Unstyled Content (FOUC) on page load. Until Tailwind
CSS loads via CDN/JIT, the hidden class had no effect, causing all tab
panels to be briefly visible. This was especially noticeable with the
ToolOps panel which has hx-trigger="load" and starts fetching content
immediately.

Closes #2933

Signed-off-by: SuciuDaniel <Daniel.Vasile.Suciu@ibm.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working SHOULD P2: Important but not vital; high-value items that are not crucial for the immediate release ui User Interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG][UI]: FOUC — tab panels flash on page load because .hidden CSS rule is commented out

2 participants