@@ -93,7 +93,6 @@ function applyViewTransitionToClones(
93
93
// created by the insertion side. If the insertion side if found before the deletion side
94
94
// then this is called by the deletion. If the deletion is visited first then this is called
95
95
// later by the insertion when the clone has been created.
96
- // TODO: Should we measure if this in the viewport first?
97
96
for ( let i = 0 ; i < clones . length ; i ++ ) {
98
97
applyViewTransitionName (
99
98
clones [ i ] ,
@@ -142,6 +141,12 @@ function trackDeletedPairViewTransitions(deletion: Fiber): void {
142
141
props . share ,
143
142
) ;
144
143
if ( className !== 'none' ) {
144
+ // TODO: Since the deleted instance already has layout we could
145
+ // check if it's in the viewport and if not skip the pairing.
146
+ // It would currently cause layout thrash though so if we did that
147
+ // we need to avoid inserting the root of the cloned trees until
148
+ // the end.
149
+
145
150
// The "old" instance is actually the one we're inserting.
146
151
const oldInstance : ViewTransitionState = pair ;
147
152
// The "new" instance is the already mounted one we're deleting.
@@ -181,6 +186,12 @@ function trackEnterViewTransitions(deletion: Fiber): void {
181
186
) ;
182
187
if ( className !== 'none' ) {
183
188
if ( pair !== undefined ) {
189
+ // TODO: Since the deleted instance already has layout we could
190
+ // check if it's in the viewport and if not skip the pairing.
191
+ // It would currently cause layout thrash though so if we did that
192
+ // we need to avoid inserting the root of the cloned trees until
193
+ // the end.
194
+
184
195
// Delete the entry so that we know when we've found all of them
185
196
// and can stop searching (size reaches zero).
186
197
// $FlowFixMe[incompatible-use]: Refined by the pair.
@@ -262,6 +273,10 @@ function applyExitViewTransition(placement: Fiber): void {
262
273
state . paired ? props . share : props . exit ,
263
274
) ;
264
275
if ( className !== 'none' ) {
276
+ // TODO: Ideally we could determine if this exit is in the viewport and
277
+ // exclude it otherwise but that would require waiting until we insert
278
+ // and layout the clones first. Currently wait until the view transition
279
+ // starts before reading the layout.
265
280
const clones = state . clones ;
266
281
// If there are no clones at this point, that should mean that there are no
267
282
// HostComponent children in this ViewTransition.
0 commit comments