Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stop treating lazy-loaded frames as loaded #1269

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+68 −0
Open

Stop treating lazy-loaded frames as loaded #1269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
90223a5
Attempt to reproduce issue
tpaulshippy May 30, 2024
75181bf
Test for loaded promise on lazy loaded frame
tpaulshippy May 30, 2024
fa983a0
Use "lazyLoaded" promise
tpaulshippy May 30, 2024
7006eb8
Add lazy loaded promise
tpaulshippy May 30, 2024
7a457e2
Split lazy test out into separate files
tpaulshippy May 31, 2024
d848f06
Remove extra promise logic that breaks stuff
tpaulshippy May 31, 2024
7620755
Restore file to main copy
tpaulshippy May 31, 2024
cbbff45
Add trailing line break
tpaulshippy May 31, 2024
c7da221
Add another trailing line break
tpaulshippy May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/core/frames/frame_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ export class FrameController {
if (!this.#connected) {
this.#connected = true
if (this.loadingStyle == FrameLoadingStyle.lazy) {
this.element.loaded = new Promise((resolve) => {
this.lazyLoadResolver = resolve
})
this.appearanceObserver.start()
} else {
this.#loadSourceURL()
Expand Down Expand Up @@ -110,6 +113,10 @@ export class FrameController {
this.element.loaded = this.#visit(expandURL(this.sourceURL))
this.appearanceObserver.stop()
await this.element.loaded
if (this.lazyLoadResolver)
{
this.lazyLoadResolver()
}
this.#hasBeenLoaded = true
}
}
Expand Down
34 changes: 34 additions & 0 deletions src/tests/fixtures/frame_lazy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html data-skip-event-details="turbo:before-render">
<head>
<meta charset="utf-8">
<title>Turbo</title>
<script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
<script src="/src/tests/fixtures/test.js"></script>
<script type="module">
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
const application = Application.start()
application.register("test", class extends Controller {
static targets = ["frameElement"]
connect() {
this.adjustFocus()
}

async adjustFocus() {
await this.frameElementTarget.loaded
document.getElementById("permanent-input-in-frame").focus()
}


})
</script>
</head>
<body>
<details id="loading-lazy" data-controller="test">
<summary>Lazy-loaded</summary>

<turbo-frame id="hello" data-test-target="frameElement" src="/src/tests/fixtures/frames/hello.html" loading="lazy"></turbo-frame>
</details>

</body>
</html>
27 changes: 27 additions & 0 deletions src/tests/functional/frame_lazy_tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { test, expect } from "@playwright/test"
import { assert } from "chai"
import {
hasSelector,
nextBeat,
readEventLogs
} from "../helpers/page"

test.beforeEach(async ({ page }) => {
await page.goto("/src/tests/fixtures/frame_lazy.html")
await readEventLogs(page)
})

test("when lazy loading, loaded promise does not resolve until it is actually loaded", async ({ page }) => {
await nextBeat()

const frameContents = "#loading-lazy turbo-frame h2"
assert.notOk(await hasSelector(page, frameContents))
assert.ok(await hasSelector(page, "#loading-lazy turbo-frame:not([complete])"))

await page.click("#loading-lazy summary")
await nextBeat()

const inputSelector = "#permanent-input-in-frame"

await expect(page.locator(inputSelector)).toBeFocused()
})
Loading