Page MenuHomePhabricator
Create Task
Maniphest T345405

Remove the FOUC of the client-nojs JavaScript warning message
Closed, ResolvedPublicBUG REPORT
Actions

Description

Feature summary:
Remove (or somehow reduce) the amount of time we are obliged to see the warning message.

Use-cases:
Every time we load a function, we get a flash of the message "This page displays in a limited way without JavaScript."
Per chat discussion, this is "because we don't have server side rendering available at the Foundation, and having two rendering pipelines would have been expensive".
However, minimizing the visibility/distraction of this message would be beneficial.

Benefits:
Reading the message on every page-load is distracting and unhelpful, and potentially disrupts a user's chain-of-thought.

Suggested solution:
Make the required JavaScript load with the page (and not after the page is already loaded), so you don't get that flash effect.

[Filing on behalf of chat discussion participants. Please edit the description if I've misunderstood anything!]

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Fix no-JS message flash and improve loading experiencemediawiki/extensions/WikiLambdamaster+272 -123
Customize query in gerrit

Event Timeline

Quiddity created this task.Sep 1 2023, 1:05 AM
Jdforrester-WMF triaged this task as Low priority.Sep 21 2023, 4:52 PM
Jdforrester-WMF changed the subtype of this task from "Feature Request" to "Bug Report".
Jdforrester-WMF moved this task from To Triage to Backlog on the Abstract Wikipedia team board.
Jdforrester-WMF renamed this task from Remove the flash of JavaScript warning message to Remove the FOUC of the client-nojs JavaScript warning message.Feb 15 2024, 2:16 PM
Jdforrester-WMF added a project: WikiLambda.
Jdforrester-WMF moved this task from Backlog to 24Q4 (Apr–Jun) on the Abstract Wikipedia team board.Apr 1 2024, 6:49 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team (24Q4 (Apr–Jun)); removed Abstract Wikipedia team.
Jdforrester-WMF moved this task from Incoming to Ready, Bugs on the Abstract Wikipedia team (24Q4 (Apr–Jun)) board.Apr 1 2024, 7:09 PM
Jdforrester-WMF moved this task from 24Q4 (Apr–Jun) to 25Q1 (Jul–Sep) on the Abstract Wikipedia team board.Jun 17 2024, 8:23 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team (25Q1 (Jul–Sep)); removed Abstract Wikipedia team (24Q4 (Apr–Jun)).
Jdforrester-WMF moved this task from Incoming to Bugs to investigate on the Abstract Wikipedia team (25Q1 (Jul–Sep)) board.Jun 17 2024, 8:31 PM
DSmit-WMF subscribed.EditedAug 16 2024, 1:20 PM

Could you explain why we are using 2 divs rendered from PHP and hiding them inside the Vue.js app? @DVrandecic @Jdforrester-WMF @gengh
Loading the entire bundle in a synchronous way doesn't seem preferable to me performance wise.

Is there a reason we are not leveraging a <noscript/> tag?

So this:

$parserOutput->setText(
	// Placeholder div for the Vue template.
	Html::element( 'div', [ 'id' => 'ext-wikilambda-app' ] )
		// Add a noscript tag to display a warning message when JavaScript is disabled.
		. Html::rawElement(
		'noscript',
		[],
		Html::element(
			'div',
			[
				'class' => 'ext-wikilambda-view-nojswarning warning',
			],
			wfMessage('wikilambda-viewmode-nojs')->inLanguage($userLang)->text()
		)
	)

Instead of:

. Html::rawElement(
	'div',
	[
		'class' => [ 'ext-wikilambda-view-nojsfallback', 'client-nojs' ],
	],
	Html::element(
		'div',
		[
			'class' => [ 'ext-wikilambda-view-nojswarning', 'warning' ],
		],
		wfMessage( 'wikilambda-viewmode-nojs' )->inLanguage( $userLang )->text()
	)
)
DSmit-WMF added subscribers: gengh, DVrandecic, Jdforrester-WMF.Aug 16 2024, 1:21 PM
Jdforrester-WMF moved this task from 25Q1 (Jul–Sep) to 25Q2 (Oct–Dec) on the Abstract Wikipedia team board.Oct 8 2024, 1:57 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team (25Q2 (Oct–Dec)); removed Abstract Wikipedia team (25Q1 (Jul–Sep)).
Jdforrester-WMF moved this task from Incoming to Bugs to investigate on the Abstract Wikipedia team (25Q2 (Oct–Dec)) board.Oct 8 2024, 2:09 PM
Jdforrester-WMF moved this task from 25Q2 (Oct–Dec) to 25Q3 (Jan–Mar) on the Abstract Wikipedia team board.Jan 15 2025, 5:29 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team (25Q3 (Jan–Mar)); removed Abstract Wikipedia team (25Q2 (Oct–Dec)).
Jdforrester-WMF moved this task from Incoming to Bugs to investigate on the Abstract Wikipedia team (25Q3 (Jan–Mar)) board.
Jdforrester-WMF moved this task from 25Q3 (Jan–Mar) to Bugs to investigate on the Abstract Wikipedia team board.Mar 24 2025, 3:36 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team; removed Abstract Wikipedia team (25Q3 (Jan–Mar)).
gerritbot added a comment.Dec 18 2025, 1:04 PM

Change #1219583 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] Fix no-JS message flash and improve loading experience

https://gerrit.wikimedia.org/r/1219583

gerritbot added a project: Patch-For-Review.Dec 18 2025, 1:04 PM
DSmit-WMF claimed this task.Dec 18 2025, 1:05 PM
gerritbot added a comment.Jan 7 2026, 11:59 AM

Change #1219583 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Fix no-JS message flash and improve loading experience

https://gerrit.wikimedia.org/r/1219583

Maintenance_bot removed a project: Patch-For-Review.Jan 7 2026, 12:30 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team (26Q3 (Jan–Mar)), MW-1.46-notes (1.46.0-wmf.11; 2026-01-13); removed Abstract Wikipedia team.Jan 7 2026, 1:38 PM
Jdforrester-WMF moved this task from Incoming to Ready to deploy on the Abstract Wikipedia team (26Q3 (Jan–Mar)) board.
Jdforrester-WMF added a project: Abstract Wikipedia Fix-It tasks.
DSantamaria added a project: Essential-Work.Jan 8 2026, 1:51 PM
DSantamaria changed the task status from Open to In Progress.Jan 8 2026, 3:13 PM
Jdforrester-WMF moved this task from Ready to deploy to Needs Sign-off on the Abstract Wikipedia team (26Q3 (Jan–Mar)) board.Thu, Jan 15, 1:30 PM

@DSmit-WMF: This has now been deployed to production; is it good to sign off?

DSmit-WMF closed this task as Resolved.Thu, Jan 15, 5:56 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits