Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Layout: Layout shift - inner components are rendered before the layout

See original GitHub issue

Describe the bug Inner components in layout can be rendered ahead of the layout itself causing layout shift.

Reproducer

primefaces-test.zip

Main xhtml:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <title>PrimeFaces Test</title>
    </h:head>
    <h:body>

		<pe:layout fullPage="false">
		 	<pe:layoutPane position="west">
		    	<div style="background:red;width:100%">test</div>
		    	
		    	 <p:inputText value="West Text" style="width:100%"/>             
		    </pe:layoutPane>
		    
		    <pe:layoutPane position="center">
		    	<p:inputText value="Main Text" style="width:100%"/>   
		    </pe:layoutPane>
		 </pe:layout>
    </h:body>
</html>

Environment:

PF Version: 10.0

To Reproduce Steps to reproduce the behavior:

mvn clean jetty:run
Go to http://localhost:8080/primefaces-test/
Refresh the page and see if there’s flickering

Expected behavior The layout should be rendered before the inner components, layout shift shouldn’t happen.

As a closer look, we can see at some point the layout hasn’t been rendered yet while the inner components are rendered before the layout. Let’s see if this is a known issue or there’s something I missed 👀 .