Move the effects and synthetic events dispatching to after the draw phase in the render loop.

[m-sasha]

While investigating this, we've discovered that LazyColumn moves its elements synchronously when scrolled (only if the scrolling causes new items to become visible).

Additionally, we currently run coroutines launched in a composition's rememberCoroutineScope between the layout and draw phases (due to #1034 and our desire to send the synthetic events before the draw phase, to avoid a one-frame delay when scrolling a list that highlights the item under the mouse).

Together these two create a problem (visible in the video linked above) because when the LazyColumn is scrolled from a launched coroutine, it moves its element to the position where they would normally appear only on the next frame, which causes a visible "jump".

Proposed Changes

After much consideration (with @igordmn) we decided to strictly adhere to the ordering of the phases as they are done on Android:

1. Flush any pending effects.
2. Composition (which can schedule effects to be run after render completes).
3. Layout
4. Schedule synthetic events, if any, to be delivered after render completes.
5. Draw
6. (after render) scheduled composition effects.
7. (after render) scheduled synthetic events.

Testing

Test: Tested the "jumpy" lazy column manually, and added unit tests to verify the order of the render phases.

The manual test:

import androidx.compose.foundation.ScrollState
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.withFrameMillis
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.PointerEventType
import androidx.compose.ui.input.pointer.onPointerEvent
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.singleWindowApplication
import kotlinx.coroutines.launch

val scrollState = ScrollState(0)
val lazyColumnState = LazyListState(0, 0)

fun main() = singleWindowApplication { 
    Box(modifier = Modifier.fillMaxSize()) {
        Row {
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .weight(1f)
                    .verticalScroll(scrollState)
            ) {
                (0..100).forEach { index ->
                    Text(
                        "Column item $index",
                        style = TextStyle(fontSize = 30.sp),
                        modifier = Modifier.height(150.dp).fillMaxWidth().border(
                            width = 1.dp,
                            color = Color.Black
                        )
                    )
                }
            }


            LazyColumn(
                state = lazyColumnState,
                modifier = Modifier.fillMaxHeight().weight(1f)
            ) {
                items(100) { index ->
                    Text(
                        "LazyColumn item $index",
                        style = TextStyle(fontSize = 30.sp),
                        modifier = Modifier.height(150.dp).fillMaxWidth().border(
                            width = 1.dp,
                            color = Color.Black
                        )
                    )
                }
            }
        }

        LaunchedEffect(Unit) {
            var direction = 0
            var startTime = 0L
            var frameCount = 0
            while (true) {
                withFrameMillis { millis ->
                    frameCount += 1
                    if (frameCount.mod(1) == 0) {
                        if (direction == 0) {
                            startTime = millis
                            direction = 1
                        }
                        else if (millis - startTime > 10000) {
                            startTime = millis
                            direction = -direction
                        }
                        val scrollDelta = 5 * direction
                        launch {
                            scrollState.scrollBy(scrollDelta.toFloat())
                            lazyColumnState.scrollBy(scrollDelta.toFloat())
                        }
                    }
                }
            }
        }
    }
}

This PR should be verified by QA.

Issues Fixed

Possibly fixes JetBrains/compose-multiplatform#4438