logan
795f40acee
One 1.18 MB chunk containing all 27 views, every one eagerly imported and side-effect-evaluated before first paint. `index.ts` now holds a loader table per view and awaits the right chunk before creating the element. JS evaluated before first paint: 1 480 kB -> 772.9 kB, in 27 chunks instead of one, with the slowest first open of a view at 19 ms against 21 ms — both halves of the trade, and the second did not get worse. Two things it has to get right. `document.createElement` on an undefined tag yields an inert HTMLElement rather than throwing, so a missing entry in the table is a blank page and not an error; and navigations are numbered, so a slow chunk cannot land on top of a faster navigation. `notification-host`, `inline-notice` and `confirm-dialog` stay eager on purpose: a failure surface that has to fetch a chunk before it can speak is not a failure surface, and the moment it is most needed is the likeliest moment loading one fails.
43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<link href="./index.css" rel="stylesheet" />
|
|
<title>yellowjacket</title>
|
|
<script src="/index.ts" type="module"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="top-bar">
|
|
<hgroup>
|
|
<h1 class="title">YellowJacket</h1>
|
|
<h3 class="subtitle">Music how it was meant to bee.</h3>
|
|
</hgroup>
|
|
<library-filter></library-filter>
|
|
<search-bar></search-bar>
|
|
<job-indicator></job-indicator>
|
|
</header>
|
|
<div class="sidebar">
|
|
<app-sidebar></app-sidebar>
|
|
</div>
|
|
<div class="content-area">
|
|
<main class="main-panel" data-active-view="tracks" data-testid="main-content" id="main-content">
|
|
<track-list></track-list>
|
|
</main>
|
|
<queue-panel id="queue-panel"></queue-panel>
|
|
</div>
|
|
<footer class="bottom-bar">
|
|
<now-playing></now-playing>
|
|
<audio-player></audio-player>
|
|
<button aria-label="Toggle queue" id="queue-button">
|
|
<wa-icon name="list"></wa-icon>
|
|
</button>
|
|
</footer>
|
|
<first-run-wizard></first-run-wizard>
|
|
<notification-host></notification-host>
|
|
</body>
|
|
|
|
</html>
|