Uwe 

Hello Uwe,

Thank you very much for taking the time to recreate it and for the recording – very helpful.

I agree with your result: with simple text fields from linked tables, the component renders immediately. I tested it again and the difference in my case came from two things your example doesn't include:

1. Images: my header showed team logos with <img src="…"> using shareFile() URLs from the linked table. The browser loads the images after the component is drawn, and without fixed sizes the layout moved.

2. Heavier scripting: several select … where queries and aggregations (leader, totals, form) on other tables inside the component.

After simplifying the headers to text only (no images, values pre-calculated by a button and stored in fields), the form no longer jumps. So, as you say, it depends on how much scripting is put inside the component.

Thanks also for the function Row(…) pattern and the bg-content1 / text-foreground classes – I'll use them to simplify my components.

Best regards,

Rafael

Uwe 

Simple example

function Row(label: string, value: any) do
<div class="flex flex-col">
<span class="text-xs text-default-500">
{ label }
</span>
<span class="text-lg font-semibold">
{ value }
</span>
</div>
end;
<div
class="flex items-center gap-6 p-4 rounded-lg bg-content1 text-foreground shadow"
>
<div style="width:56px;height:56px;flex-shrink:0">
{ if text(logo_link) != "" then
<img src={ text(logo_link) } style="width:56px;height:56px;object-fit:contain"/>
end }
</div>
<Row label="Company" value={ company }/>
<Row label="Projects" value={ cnt(table_a) }/>
<Row label="Cities" value={ join(unique(table_a.table_c.ort), ", ") }/>
</div>

The script en header Table B

What I observed:

- In Table C, the custom component header contains only text: the city name, the number of projects and the list of companies. These values are read through the reverse relation (cnt(table_a), unique(table_a.tableb.company)).

- When switching records (for example, from Paris to Caracas), the header disappears for a moment and a loading spinner appears. The rest of the form moves up. Then the header renders and pushes the form down again.

- The related-records subtable (Table A) also appears with a delay: first empty, then filled.

- Table B shows the same behaviour, and its header also uses the reverse relation.

So the shift happens even without images. My conclusion, which I'd like you to confirm, is:

- Reading N:1 links "upwards" (tableb.company, tablec.ort), as in your example, renders immediately.

- Reading 1:N reverse relations or using select inside the component makes the component wait until the related records are loaded. Because its space is not reserved in the meantime, the form shifts.

Your example only uses N:1 links, which would explain why you didn't see the delay. I will add your exact script to Table A and record it next to the Table C header to compare both cases directly.

Is this the expected behaviour for reverse relations? And is there a recommended way to avoid the shift, such as reserving the component height, or pre-calculating these values into fields of the record?

Best regards,

Rafael