@vernikr/size-report 2.6.0 → 2.7.0

package/README.md

@@ -10,7 +10,7 @@ shows.
 
 ## Status
 
-**Release 2.6.0 (2026-09-17).** The tool lives as a package of its own: the registry name is
+**Release 2.7.0 (2026-09-17).** The tool lives as a package of its own: the registry name is
 `@vernikr/size-report` (published by tag from CI, with no secret). A project may keep no settings at
 all: without a config file the tool derives them from the project itself and says so in one line,
 and `--init` pins what was derived into a file. The report is **one file**, the self-contained page
@@ -19,6 +19,28 @@ is installed and on the first run. The version is in the manifest, and every rel
 the journal — `worklog/` for today's entries, `worklog/archive/WORKLOG.md` for the earlier ones:
 what changes in the numbers is measured rather than retold.
 
+2.7.0 is about the page and what a reader does with it, and its figures are measured rather than retold.
+**The report's address stays clean:** a switch writes the record into the browser's memory and nothing into the
+address bar — the page no longer puts a `#size-report=…` tail on the report it was opened with — while a link
+made by an earlier release is still read, and a foreign or broken one is still explained in words. **A test
+is a category of its own**, right after Code: the files of `test`, `tests` and `fixtures` folders wherever
+they stand, and every name carrying `.test` before its extension — on this repository's own history Tests
+holds **47 of 317 columns**, and the checkbox of the documentation is called **Docs**. **The tree opens
+folded**, and the unfolding is what the memory keeps, under a key of its own; inside a level a hidden name —
+one beginning with a dot — stands after every visible one. **The drawing of a switch is measured, and it is one
+task**: the click is counted and answered, a drawing short enough to be over before the browser could paint is
+done on the click, and a longer one happens in the next task with a stripe over the top edge of the window. The
+price of a switch is the browser's own relayout of the table — 234.5 ms of layout for a *single* cell of this
+repository's report (249 rows, 317 columns, 238 thousand cells), 287 ms for 750, 539 ms for 6 000 — while the
+class changes are about 2 µs a node; on this page the whole Table of Contents of the report (73 columns) is
+867 ms blocked with a 742 ms task. A queue worked off in slices was written first and refused by measurement:
+the same click in 37 slices paid that relayout 37 times — **169 layouts and 151.9 s of pure layout time against
+1.04 s**, with the tab growing to gigabytes of repaint and the reader waiting four minutes for a switch that
+costs him less than a second unsliced. Within one task nothing can repaint, so a bar that filled would be a bar
+nobody could read: the stripe travels and says the work is going on (`probes/step-12-columns.mjs`, the records in
+`worklog/0207-page-choice-bar.md`). The order of the columns did not change there: what the last commit touched
+still stands first, the rest after it in the settings' order.
+
 2.6.0 changes the numbers themselves, and they are measured rather than retold: on this repository's own
 history the page this engine writes is **85 955 B against 1 899 370 B** written by 2.5.0 — 22.1 times
 smaller, −95.5 % — because the data travels as one packed block (49 392 B, `base64+gzip`) instead of a list
@@ -76,7 +98,8 @@ selection" are impossible in principle. The contract tells how each number was o
 no rule of counting of its own, and the split of numbers into exact and approximate was taken out of the
 package. The page's panel is a
 tree of files by folder, with a switch per folder for the whole subtree; a reader's choice survives
-a revisit and travels in a link — the page's address is the link. The contract carries the **project
+a revisit in the browser's memory, and the address keeps a clean tail — an address with a link of its
+own is read and never written (release 2.7.0). The contract carries the **project
 catalogue** too: every path git sees, so the page's tree is the project's tree, while numbers exist
 only for the files that became columns (release 2.2.0).
 
@@ -287,7 +310,9 @@ choice. The report itself is always in the catalogue, whether or not it is track
 of the moment, and the page must not depend on it, or the first rebuild in a fresh clone would give
 different bytes. A folder whose files are only partly in the report writes its count as a fraction
 ("2/5"), and everything outside the report stands after everything inside it — folders and leaves
-alike — so that the report is seen at once in a list where half the rows do not switch
+alike — so that the report is seen at once in a list where half the rows do not switch. The name of a level
+holds a second rule: a hidden name — one beginning with a dot — stands after every visible one, the alphabet
+deciding the rest, so the service files of a project do not stand in the reader's way
 (`test/page-tree.test.js`).
 
 **A folder is a switch like a file, and its sign is a decision of its own.** The checkbox of a folder
@@ -296,8 +321,10 @@ next to it. Neither a folder nor a category button keeps state of its own: both
 checkboxes, so the tree, the buttons and the table cannot drift apart. The sign beside a folder answers
 a different question — how much of the tree is visible, which is the onlooker's business rather than the
 reader's choice — so it is remembered between visits in a record of its own, under a key of its own and
-the same report passport, and it never goes into the link; unfolding every folder removes that record,
-just as turning the checkboxes back on removes the choice.
+the same report passport, and it never goes into a link. The tree opens **folded**: a project's tree is
+longer than the window, and the reader looks at a short list first, so what the record keeps is the
+unfolding rather than the folding — folding every folder back removes the record, just as turning the
+checkboxes back on removes the choice.
 
 **The list scrolls, and there is one scroll.** On a narrow window it is the file list that scrolls —
 the panel grows with the page there — while on a wide one the whole panel does: otherwise the controls
@@ -309,6 +336,22 @@ row hides it, so a click on the sign changes exactly the three things the reader
 sign and the note in the memory. What guards this is that after folding the table is the same markup
 rather than a rebuilt one (`test/page-tree.test.js`).
 
+**A switch draws its columns in one task, with a stripe over the page while it is going on.** The class
+changes are cheap — about 2 µs a node, so a category of this repository's report (73 columns, 55 042 nodes) is
+120 ms of them — while the browser lays the whole table out again for any change of a column's visibility, and
+that is where the seconds are (`probes/step-12-columns.mjs`). So `src/page/work.js` asks for the drawing once:
+work short enough to be over before the browser could paint goes on the click itself, and a longer one goes to
+the next task with the stripe over the top edge of the window. **The stripe carries no share, and that is the
+measurement rather than a shortcut**: inside one task the browser cannot repaint, so a length would be a length
+nobody could keep; what moves is an indeterminate highlight. A queue worked off between timeouts was written
+first and refused by the same probe — 37 slices paid the table's relayout 37 times (2.5–4 s each, 169 layouts
+against 1) — and the numbers stay out of all of it, because the totals are counted on the click itself, where
+they cost arithmetic rather than nodes. Nothing is asked for a column that is already right either
+(`appColumnStale`): a report opened with everything switched on has nothing to draw, and a record from the
+memory or a link queues exactly the columns that differ from it. What guards the two halves is
+`test/page-choice.test.js` — a long drawing that leaves the click's line at once, runs in the next task and
+takes the stripe away, and a short one that is over before the click returns.
+
 **A click shows and hides rather than builds.** The table is assembled once, with every column of every
 file, and a switch afterwards changes only what is visible: a metric is one class on the table plus the
 `colSpan` of the group headings, a file's column is a class per node of it, and a folder or a category is
@@ -372,17 +415,18 @@ neither the numbers nor the markup. The passport holds neither the tool's versio
 history, and on purpose: updating the tool does not change what a column means, while a grown history is
 the very history the reader comes back to.
 
-**The same choice travels as a link.** The page's address is the link: the record that goes into the
-browser's memory goes into the anchor too (`#size-report=…`), so the sender copies the address and the
-recipient sees that choice with no action at all. The link outranks the memory — it is the sender's
-explicit choice — while it does not replace the reader's own until he changes something. A foreign or
-broken address is not applied, and is not silent either: a line above the table names the reason ("the
-link was made in another report" / "the choice in the address is unreadable"), the view stays the
-reader's own, and the incoming address is not rewritten; names the report does not hold are reported by
-count, skipped, and the rest is applied. The link works on an already open page as well: the browser does
-not reload the document when the anchor changes, so the page reads the address itself, or a link would
-only work in a new tab. The page makes no request to the network at all, and that is an assertion of a
-check rather than a promise (`test/page-view.test.js`, `test/parity.test.js`).
+**The link is read and never written.** The page's address is the report's own: a choice lives in the
+browser's memory, and the page puts nothing into the address bar — a report opened from disk keeps the
+address it was opened with, and not one switch lands in the tab's title bar. What an earlier release sent
+as a link is still read, though — the record in `#size-report=…`, in the same shape the memory holds it —
+and such a link outranks the memory while it does not replace the reader's own until he changes something.
+A foreign or broken address is not applied, and is not silent either: a line above the table names the
+reason ("the link was made in another report" / "the choice in the address is unreadable"), the view stays
+the reader's own, and the incoming address is not rewritten; names the report does not hold are reported
+by count, skipped, and the rest is applied. The link works on an already open page as well: the browser
+does not reload the document when the anchor changes, so the page reads the address itself, or a link
+would only work in a new tab. The page makes no request to the network at all, and that is an assertion of
+a check rather than a promise (`test/page-view.test.js`, `test/parity.test.js`).
 
 **The `min` metric can count for real.** The way of counting is chosen in the settings:
 `"minify": {"engine": "esbuild"}` minifies JS/TS/CSS for real through an optional dependency, while
@@ -516,11 +560,12 @@ acceptance for each.
 | `src/table.css` | The report's table: the geometry of a cell, the sticky header and commit column, the colour of deltas |
 | `src/page/app.css` | The page's styling on top of the shared part: the panel with the file tree and its sticky row of categories (a column on the left on a wide screen, the page fitting the window), the empty states, a narrow window |
 | `src/page/payload.js` | The page's block in sparse form, and the one place that unrolls it back: the history as changes (a file's appearance, its moves, its disappearance) turned into the snapshots the calculation and the table already speak — a value that did not move is one object shared by the rows that hold it |
-| `src/page/state.js` | The page's state: the report's data (the block unrolled by the payload chapter), the view of the checkboxes, the pointer "which path is which column", folded folders, the record's passport, the browser's memory and the exchange by link — a chapter of the page's program |
+| `src/page/state.js` | The page's state: the report's data (the block unrolled by the payload chapter), the view of the checkboxes, the pointer "which path is which column", the unfolded folders, the record's passport, the browser's memory and the link that is read out of the address — a chapter of the page's program |
 | `src/page/dom.js` | The page's nodes: the small helpers of markup (`appEl`, `appBox`) — one set for the panel and the table alike |
-| `src/page/panel.js` | The panel of choices: the switches of metrics and files, the categories, the tree of the project's paths (files outside the report keep a checkbox off with a reason and stand after the rest; folders carry a folding sign that hides the subtree by a class rather than by a rebuild); built once, with the fields of the switches and of the folders and categories written where they stand |
-| `src/page/table.js` | The page's table, built once: a cell, a commit's caption, the header, the empty states and the cache of the nodes of every column — markup over the shared calculation, with the totals carried rather than recounted |
-| `src/page/app.js` | Assembling and starting the page: the first drawing, then a switch that shows, hides and rewrites the totals without making a node; an anchor change; pasted into the assembled page |
+| `src/page/panel.js` | The panel of choices: the switches of metrics and files, the categories, the tree of the project's paths (files outside the report keep a checkbox off with a reason and stand after the rest, and a hidden name after every visible one; the tree opens folded and folders carry a sign that hides the subtree by a class rather than by a rebuild); built once, with the fields of the switches and of the folders and categories written where they stand |
+| `src/page/table.js` | The page's table, built once: a cell, a commit's caption, the header, the empty states and the cache of the nodes of every column — markup over the shared calculation, with the totals carried rather than recounted, and the count answerable for how many nodes a column holds |
+| `src/page/work.js` | The page's long drawing: the columns of a switch in one task, on the click when they are few and in the next task with an indeterminate stripe over the top edge of the window when they are many — one task because the browser's relayout of the table is the price, and it is paid once (this is where the measurement that refused the slices stands) |
+| `src/page/app.js` | Assembling and starting the page: the first drawing, then a switch that counts the numbers on the click, hands the columns to the queue and writes the fields it reached without making a node; an anchor change; pasted into the assembled page |
 | `src/page/build.js` | Assembling the page: data, styling and program in one file with no external references — the pasted text is **squeezed** on the way in (comments and indentation out, the same stripping the `min` metric counts) while the sources keep them, and the result is guarded by the stripper's own `assertCompilable` |
 | `src/git.js` | The only border where git is called: the pinned settings, blobs by the batch, the history, the comparison with the working tree |
 | `src/strip.js` | Removing ballast: which form goes to which file (extension, strategy) and which strategies are minification itself — the entry to the parsing of forms |
@@ -541,7 +586,7 @@ acceptance for each.
 | `bin/postinstall.js` | Installing the hook after the package is added: it looks for the consumer project and stays silent when there is nowhere to install |
 | `src/artifact.js` | The report on disk: the only place where it becomes a file (both `--write` and the hook use it); the report is a self-contained page |
 | `src/journal.js` | The journal and links: which section a commit belongs to and where a description leads |
-| `src/data.js` | The file categories and the contract with the page (`--data`): the numbers, the shape of the table and the catalogue of the project's paths |
+| `src/data.js` | The file categories (a test by its path — a `test`, `tests` or `fixtures` folder, or `.test` before the extension — otherwise the extension, and the settings above both) and the contract with the page (`--data`): the numbers, the shape of the table and the catalogue of the project's paths |
 | `src/config.js` | The consumer project's settings: the defaults, reading them, checking them |
 | `src/project.js` | The settings derived from the project itself (its tree and history): columns, the journal, the exceptions, the catalogue of paths for the page's tree. Without a settings file it *is* the settings; `--init` pins it as a file |
 | `src/locales.js`, `src/refusal.js`, `src/tool.js` | The report's texts; the exit codes and the help; the package's name and version |
@@ -569,8 +614,8 @@ acceptance for each.
 | `test/contract-data.test.js` | The data contract: the numbers against the reference, the set of fields against the derived quantities, the metric's method against the way the numbers were counted — and the round trip through the page's sparse block, which restores the contract whole and twice over the same bytes |
 | `test/contract-derived.test.js` | The derived quantities against the artifact's numbers: a row's totals, a cell's delta and the delta of a total — on the code that lies in the tree |
 | `test/page-view.test.js` | The assembled page: pasted with no copy of the calculation, self-contained, the empty states, the styling, the switches, a click that makes no table and the carried totals against the engine's own sums |
-| `test/page-tree.test.js` | The panel's file tree: folders by the project's paths, three states, the subtree, files and folders outside the report (a checkbox off, a place after the rest), folding without a rebuild and a scroll a click does not touch |
-| `test/page-choice.test.js` | The memory of the choice and the exchange by link: a revisit, someone else's report, a foreign and a broken record, an address change on an open page |
+| `test/page-tree.test.js` | The panel's file tree: folders by the project's paths, three states, the subtree, files and folders outside the report (a checkbox off, a place after the rest), the hidden names at the end of a level, the tree that opens folded and the unfolding the memory keeps, folding without a rebuild and a scroll a click does not touch |
+| `test/page-choice.test.js` | The reader's choice and the work a click starts: the memory and a revisit, someone else's report, a foreign and a broken record, an address that stays clean, a link read at opening and on an open page, and the drawing of a long switch in a task of its own behind the stripe |
 | `test/page-cols.test.js` | The fixed layout the page carries: a column's width is counted from the model rather than measured in a laid-out cell, the clip keeps a caption inside its column, the sticky header and commit column keep their edges, and the table names its own width (`width: auto` would hand the layout back to the automatic algorithm) |
 | `test/module.test.js` | A module under a `.js` extension: measured without touching the settings; the stripper's guard is alive (proved by mutation) and does not accuse the innocent |
 | `test/guard.test.js` | Parsing a module: it goes through a thread, both paths give one verdict, the fallback works with the thread's file away, and hundreds of parses are cheaper than a launch |
@@ -651,7 +696,7 @@ The same release can be taken by a reference to the repository — installation
 registry, but stays tied to a revision:
 
 ```bash
-pnpm add -D github:vernikr/size-report#v2.6.0
+pnpm add -D github:vernikr/size-report#v2.7.0
 ```
 
 With no network (or nothing to fetch from codeload) — the tarball: `pnpm pack` in the package clone, then
@@ -663,7 +708,7 @@ the branch moves on the installation fails with `Could not resolve <sha> to a co
 observation rather than reasoning: the short pin `6530237` installed while `main` stood on it and stopped
 working at the very next commit, while the same sha in full installed. A branch name (`#main`) and a tag
 are both accepted, but a branch is a moving target and a tag is constant: this release stands on the tag
-`v2.6.0`, which is also the one in the example (forty characters work as well, but they have to be copied
+`v2.7.0`, which is also the one in the example (forty characters work as well, but they have to be copied
 out of the history by eye).
 
 The revision in the example is a part of the claim rather than decoration: what is described below is

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vernikr/size-report",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "author": "vernikr",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "report"
   ],
   "devDependencies": {
-    "@vernikr/size-report": "2.5.0",
+    "@vernikr/size-report": "2.6.0",
     "c8": "10",
     "dependency-cruiser": "17",
     "eslint": "^9.18.0",

package/src/data.js

@@ -10,19 +10,35 @@ import { TOOL_PKG } from './tool.js';
  * derived quantity at all. Everything the page counts itself begins where this module ends. */
 
 /* A file's category is only for the page's quick on/off buttons for a group: it does not reach the
- * numbers. The rule is one: the extension gives the category, everything else counts as code; a category
- * set in the column's settings outranks that rule, and the data says where it came from (`categoryBy`) — a
- * manual decision is explainable, while a table of extensions is a guess by file name. */
+ * numbers. The rule is: a category set in the column's settings outranks everything, a test is
+ * recognised by its path rather than by its extension, and for the rest the extension gives the
+ * category while everything else counts as code. The data says where the category came from
+ * (`categoryBy`) — a manual decision is explainable, while a table of extensions is a guess by file
+ * name. */
 export const CATEGORY_EXTS = {
   docs: ['.md', '.markdown', '.rst', '.txt', '.adoc'],
   chore: ['.json', '.yaml', '.yml', '.toml', '.ini', '.cfg', '.conf', '.lock', '.editorconfig'],
   assets: ['.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.woff', '.woff2', '.ttf', '.otf']
 };
-export const CATEGORY_ORDER = ['code', 'docs', 'chore', 'assets'];
+/* Tests stand next to code: they are files of the same kind (`*.test.js` is JavaScript too), and a reader
+ * switching code off wants to see what the tests weigh separately. */
+export const CATEGORY_ORDER = ['code', 'tests', 'docs', 'chore', 'assets'];
+
+/* What makes a file a test: the folder it lies in, wherever that folder is in the project, or a name
+ * carrying `.test` before its extension. Both are read off the path rather than off the extension, which is
+ * how a test is recognised in practice — a test may be written in any language the tool can measure. */
+const TEST_DIRS = ['test', 'tests', 'fixtures'];
+const TEST_NAME = /\.test\.[^./]+$/;
+
+function isTest(p) {
+  return p.split('/').some((part) => TEST_DIRS.indexOf(part) >= 0) || TEST_NAME.test(path.basename(p));
+}
 
 export function categoryOf(col) {
   if (col.category) return { key: col.category, by: 'config' };
-  const ext = path.extname(col.paths[col.paths.length - 1]).toLowerCase();
+  const last = col.paths[col.paths.length - 1];
+  if (isTest(last)) return { key: 'tests', by: 'auto' };
+  const ext = path.extname(last).toLowerCase();
   const known = CATEGORY_ORDER.find((key) => (CATEGORY_EXTS[key] || []).indexOf(ext) >= 0);
   return { key: known === undefined ? 'code' : known, by: 'auto' };
 }

package/src/locales.js

@@ -9,7 +9,7 @@ export const LOCALES = {
     commit: 'Коммит',
     total: 'Общий объём',
     now: 'сейчас',
-    categories: { code: 'Код', docs: 'Документация', chore: 'Служебные', assets: 'Ресурсы' },
+    categories: { code: 'Код', tests: 'Тесты', docs: 'Документация', chore: 'Служебные', assets: 'Ресурсы' },
     /* The page texts live inside the report file itself (a dictionary of their own, next to
      * the data), so changing a word costs a rebuild of the report — otherwise the file
      * drifts from the history. */
@@ -53,6 +53,9 @@ export const LOCALES = {
        * таблица не сказала бы читателю ничего. */
       unpack: 'Данные отчёта сжаты, а браузер не умеет их распаковать: в нём нет DecompressionStream. '
         + 'Обновите браузер — таблицу показывать не из чего.',
+      /* Полоска вверху страницы: имя для тех, кто читает страницу не глазами, — она показывает,
+       * что идёт отрисовка колонок, а не что отчёт завис. */
+      working: 'отрисовка колонок',
       note: 'Абсолютные размеры стоят один раз — в строке «{now}». Строк: {rows}: коммиты без '
         + 'изменения объёма и коммиты, тронувшие только выключенные файлы, строк не получают. '
         + 'Собрано из истории git: {command}.'
@@ -80,7 +83,7 @@ export const LOCALES = {
     commit: 'Commit',
     total: 'Total',
     now: 'now',
-    categories: { code: 'Code', docs: 'Documentation', chore: 'Chores', assets: 'Assets' },
+    categories: { code: 'Code', tests: 'Tests', docs: 'Docs', chore: 'Chores', assets: 'Assets' },
     page: {
       metrics: 'Metrics',
       files: 'Files',
@@ -113,6 +116,9 @@ export const LOCALES = {
        * browser without `DecompressionStream` gets instead of an empty table. */
       unpack: 'The report\u2019s data is compressed and this browser cannot unpack it: there is no '
         + 'DecompressionStream. Update the browser — there is nothing to build the table from.',
+      /* The bar at the top of the page: a name for whoever reads the page without eyes — it shows
+       * that the columns are being drawn rather than that the report has hung. */
+      working: 'drawing the columns',
       note: 'Absolute sizes appear once — in the “{now}” row. Rows: {rows}: commits that change '
         + 'no number, and commits touching only the disabled files, get no row. '
         + 'Collected from git history: {command}.'

package/src/page/app.css

@@ -127,6 +127,33 @@ h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em
 /* Numbers are denser than the page's text: there are more of them, they are shorter, and they are read by their digits. */
 #grid { font-size: 12.5px; }
 
+/* The stripe of a long drawing: over the window's own top edge for as long as a switch is being drawn (`src/page/work.js`).
+ * It is fixed rather than laid out — the page's shape is a grid of five rows, and a stripe appearing inside it would move the
+ * numbers every time a switch is drawn — and it is taken away as soon as the drawing is over, so the reader never sees it at
+ * rest. It **does not fill**: the drawing is one task of the browser's own layout, inside which nothing can repaint, so a
+ * share would be a share nobody has (`src/page/work.js` says what was measured). What moves instead is an indeterminate
+ * stripe — a travelling highlight, which is what this state is in the language of progress — and it moves by a transform,
+ * so the stripe itself costs the compositor rather than the page. Its colour is the system accent, the one colour the page
+ * uses for anything but the numbers, and it carries a role and a name, because a reader without eyes has to be told that
+ * work is going on rather than that the report is broken. */
+.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 3px; overflow: hidden; }
+.bar[hidden] { display: none; }
+.bar > i {
+  display: block;
+  width: 30%;
+  height: 100%;
+  background: AccentColor;
+  animation: bar-run 1.1s linear infinite;
+}
+@keyframes bar-run {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(333%); }
+}
+/* Whoever asked the system for less motion gets a still stripe: the state is what matters, not its travelling. */
+@media (prefers-reduced-motion: reduce) {
+  .bar > i { animation: none; width: 100%; }
+}
+
 /* The message about a link that came in stands above the table, so that it cannot be missed, while it does not push the
  * table away: one line in the place of the page. Its colour is the system one (the accent), for the page keeps no colours
  * of its own. */

package/src/page/app.js

@@ -1,6 +1,7 @@
 import { appUnpack } from './payload.js';
-import { appAddressDrop, appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
-import { appColumn, appContribute, appMetrics, appState, appTable, appTotals, appTotalsReset } from './table.js';
+import { appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
+import { appColumn, appColumnSize, appColumnStale, appContribute, appMetrics, appState, appTable, appTotals, appTotalsReset } from './table.js';
+import { appDraw } from './work.js';
 import { appPanel, appPanelAll, appPanelState } from './panel.js';
 
 /* Assembling the report: the table is built once (`appTable` of the table chapter) and everything afterwards only
@@ -10,12 +11,32 @@ import { appPanel, appPanelAll, appPanelState } from './panel.js';
  *
  * Hence two paths and no third: `appPaint` draws the whole view (the first drawing, a record from the browser's
  * memory, a link in the address), while `appSwitch`, `appSwitchGroup` and `appSwitchMetric` are what one click on a
- * box does. Neither makes a node.
+ * box does. The numbers are counted on the click itself — that is arithmetic over the data — while the nodes of the
+ * columns are handed to the work chapter (`appDraw`), which draws the short work on the click and the long one in the
+ * next task with a stripe over the page (`src/page/work.js` says what was measured: the price of a switch is the
+ * browser's own relayout of the table, and it is paid once here rather than once per slice). Neither path makes a
+ * node.
  */
 
 // The table's cache of node references: made once, at the first drawing.
 let appCache = null;
 
+/* One file's column drawn from the view — the state is read when the slice runs rather than kept from the click that
+ * queued it, so a click that arrives while the queue is running is drawn by the next slice rather than after it. */
+function appDrawColumn(i) {
+  appColumn(appCache, i, appView.files[i] === true);
+}
+
+/* The columns of a switch that have to be drawn, as the units the work chapter weighs (`{i, units}` — the file and the
+ * nodes of its column). Only the columns whose nodes are out of step with the view are asked for (`appColumnStale`): a
+ * report opened with everything switched on has nothing to draw, and a column that is already right would cost its
+ * nodes again. The count is the table's (`appColumnSize`), because the table is the only place that knows how many
+ * nodes a column has. */
+function appColumns(indexes) {
+  const todo = indexes.filter((i) => appColumnStale(appCache, i));
+  appDraw(appDrawColumn, todo.map((i) => ({ i: i, units: appColumnSize(appCache, i) })));
+}
+
 /* The note under the table: what a row is and how the report was made. It does not depend on the choice, so it is
  * written once — with the table rather than with every drawing of it. */
 function appNote() {
@@ -34,7 +55,7 @@ export function appCounts() {
 /* The whole view drawn: every column, the totals of the whole selection, the metrics, the empty states and the panel's
  * fields. This is what a link, a record from the memory and the first drawing need — and it makes no node either. */
 export function appPaint() {
-  appData.files.forEach((_f, i) => appColumn(appCache, i, appView.files[i]));
+  appColumns(appData.files.map((_f, i) => i));
   appTotalsReset(appCache);
   appMetrics(appCache);
   appCounts();
@@ -42,28 +63,29 @@ export function appPaint() {
   appWrite();
 }
 
-/* One file switched by the reader: the view, its column, its share of the totals and the fields it shows in — each in
- * its own place. The message about a link fades here: by this action the reader has read it. */
+/* One file switched by the reader: the view, its share of the totals, the fields it shows in and its column — the
+ * last through the queue, because a column may be long. The message about a link fades here: by this action the
+ * reader has read it. */
 export function appSwitch(i, on) {
   if (appView.files[i] === on) return;
   appView.files[i] = on;
-  appColumn(appCache, i, on);
   appContribute(appCache, i, on);
   appTotals(appCache);
   appCounts();
   appPanelState([i]);
   appWrite();
   appNotice('');
+  appColumns([i]);
 }
 
 /* A group switched at once — a folder or a category: the same work per file, then the totals once and the fields of
  * the files the choice really reached (switching a folder on when a part of it was already on touches only the rest,
- * and a field that did not move is not written). */
+ * and a field that did not move is not written). The columns of the whole group go into the queue together, so the bar
+ * counts them as one piece of work. */
 export function appSwitchGroup(indexes, on) {
   const touched = indexes.filter((i) => appView.files[i] !== on);
   touched.forEach((i) => {
     appView.files[i] = on;
-    appColumn(appCache, i, on);
     appContribute(appCache, i, on);
   });
   appTotals(appCache);
@@ -71,6 +93,7 @@ export function appSwitchGroup(indexes, on) {
   appPanelState(touched);
   appWrite();
   appNotice('');
+  appColumns(touched);
 }
 
 /* One metric switched: a class on the table and the headings' `colSpan`. The totals do not move with a metric — they
@@ -110,19 +133,18 @@ async function appBegin() {
     return;
   }
   const appStart = appLinkUse();
-  if (appStart === 'ours') appTransient = true;
-  else if (appStart === 'refused') appForeign = true;
+  /* A link that came in is the sender's choice rather than the reader's: while it is drawn, the memory is not touched
+   * (`appWrite`), so opening a link does not make it the reader's own. */
+  appTransient = appStart === 'ours';
   if (appStart !== 'ours') {
     const appSaved = appRead();
     if (appSaved !== null) appApply(appSaved);
   }
-  /* The folded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone
+  /* The unfolded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone
    * else's link is open (otherwise a link sent over would unfold the tree again on every visit). */
   appFoldRead();
   appFirst();
   appBooted = true;
-  appStartup = false;
-  appForeign = false;
   appTransient = false;
 }
 
@@ -138,13 +160,10 @@ window.addEventListener('hashchange', () => {
   /* The first drawing has not happened yet: the address the page was opened with is the business of that drawing,
    * and a change that arrives before it has drawn nothing to replace. */
   if (!appBooted) return;
-  /* An address that came in from outside is read first and a write this page was still holding is dropped: the reader
-   * has the address they were sent, not the one the previous click armed (see `appAddressDrop`). */
-  appAddressDrop();
-  const state = appLinkUse();
-  if (state === 'refused') appForeign = true;
-  appTransient = state === 'ours';
+  /* An address that came in from outside is read here the way it is read at opening, and a link is not the reader's
+   * choice until he changes something — the memory stays his own. The address itself is never rewritten: the page has
+   * no business in the tab's title bar, and what a link holds is read rather than made. */
+  appTransient = appLinkUse() === 'ours';
   appPaint();
-  appForeign = false;
   appTransient = false;
 });

package/src/page/build.js

@@ -43,7 +43,7 @@ export function pageSource(file) {
 /* The list of chapters lives here rather than in the tests: one copy for the builder and for the guard
  * (`test/page-view.test.js` reads the same program and compares it with the sources). The payload chapter comes
  * first of the page's own: it is what turns the block into the data everything else reads. */
-export const PAGE_PARTS = ['./payload.js', './state.js', './dom.js', './panel.js', './table.js', './app.js'];
+export const PAGE_PARTS = ['./payload.js', './state.js', './dom.js', './work.js', './panel.js', './table.js', './app.js'];
 
 /* The form the artifact carries: the same stripping the `min` metric counts (`src/strip.js`) — comments out,
  * indentation and blank lines out — applied to what is pasted, while the sources on disk keep everything: they are
@@ -255,6 +255,11 @@ export function pageHtml(data, cfg) {
     + squeezedCss(TABLE_CSS) + '\n' + squeezedCss(PAGE_CSS) + '\n</style>\n</head>\n<body>\n'
     + '<header>\n<h1>' + esc(data.report.heading) + '</h1>\n'
     + '<p class="sub">' + esc(subText(data, loc.page)) + '</p>\n</header>\n'
+    /* The stripe of the drawing stands first in the page and is fixed to the window's top edge rather than laid out
+     * with the rest: the page's shape is a grid of five rows (`src/page/app.css`), and a stripe that appeared and
+     * disappeared inside it would move the numbers under the reader's eyes every time a switch is drawn. It holds an
+     * empty child rather than a share: the length of an indeterminate stripe is the styling's business. */
+    + '<div id="bar" class="bar" role="progressbar" aria-label="' + esc(loc.page.working) + '" hidden><i></i></div>\n'
     + '<div id="panel" class="panel"></div>\n'
     + '<p id="notice" class="notice" hidden></p>\n'
     + '<div id="shell" class="shell"><table id="grid"></table></div>\n'

package/src/page/panel.js

@@ -66,27 +66,41 @@ function appDirHead(name, here, sub) {
   return head;
 }
 
+/* The order inside one level, and the two rules of it: a hidden name (a leading dot) stands after every visible one —
+ * a project's service files are not what a reader looks for first — and otherwise the alphabet decides. "Other things
+ * being equal" is the whole of it: what the report holds stands before what it does not, and that partition is made
+ * before the names are compared. The rule is a function of two strings, which is what lets it be checked on its own
+ * rather than through a tree of a fixture that has no hidden files in it. */
+export function appName(a, b) {
+  const hidden = (name) => (name.charAt(0) === '.' ? 1 : 0);
+  if (hidden(a) !== hidden(b)) return hidden(a) - hidden(b);
+  return a < b ? -1 : (a > b ? 1 : 0);
+}
+
 /* The folder's sign is a click target of its own, separate from the checkbox: the checkbox answers for the numbers (it
  * switches the subtree's files on), while the sign answers for how much of the tree is visible. One target for two
  * different decisions would mean a folder can be folded only together with switching its files on. The sign is drawn
  * as a span rather than a button and stands beside the label rather than inside it: a label is one click target, and a
  * control nested in it would be reached as that same target.
  *
+ * The tree opens folded — the sign of an untouched folder says so — and the reader's unfolding is what the memory
+ * keeps (`appFoldSet`).
+ *
  * A click on the sign rebuilds nothing: the subtree lies in the markup and a class on the row hides it. A rebuild here
  * would be honest work for nothing — it counts the whole table (every row by every column) and so pays for numbers
  * folding does not change. That is why only the three things the reader sees change: the class, the sign and the note
  * in the memory. */
 function appFoldBox(name, path) {
-  const folded = appView.folded[path] === true;
-  const box = appEl('span', 'fold', folded ? '▸' : '▾');
-  box.title = (folded ? appUi.foldOpen : appUi.foldClose).replace('{name}', name);
+  const open = appView.open[path] === true;
+  const box = appEl('span', 'fold', open ? '▾' : '▸');
+  box.title = (open ? appUi.foldClose : appUi.foldOpen).replace('{name}', name);
   box.addEventListener('click', () => {
-    const now = !(appView.folded[path] === true);
+    const now = !(appView.open[path] === true);
     appFoldSet(path, now);
     const li = box.closest('li');
-    if (li !== null) li.classList.toggle('folded', now);
-    box.textContent = now ? '▸' : '▾';
-    box.title = (now ? appUi.foldOpen : appUi.foldClose).replace('{name}', name);
+    if (li !== null) li.classList.toggle('folded', !now);
+    box.textContent = now ? '▾' : '▸';
+    box.title = (now ? appUi.foldClose : appUi.foldOpen).replace('{name}', name);
   });
   return box;
 }
@@ -98,14 +112,14 @@ function appLeaves(node) {
   node.others.forEach((entry) => {
     items.push({ name: entry.path.split('/').pop(), i: null, entry: entry });
   });
-  return items.sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
+  return items.sort((a, b) => appName(a.name, b.name));
 }
 
 /* A folder row: the folding sign, the checkbox with the number of files and the subtree. A folded folder differs by
  * its class alone — the markup stays the same. */
 function appDir(name, sub, prefix) {
   const here = prefix === '' ? name : prefix + '/' + name;
-  const folded = appView.folded[here] === true;
+  const folded = appView.open[here] !== true;
   const li = appEl('li', folded ? 'folded' : null);
   li.appendChild(appFoldBox(name, here));
   li.appendChild(appDirHead(name, here, sub));
@@ -126,7 +140,7 @@ function appLeaf(leaf) {
  * it does not distract from what is in the table, while it can still be found — in the same place where it was. */
 function appTreeList(node, prefix) {
   const list = appEl('ul', 'tree');
-  const dirs = [...node.dirs.keys()].sort()
+  const dirs = [...node.dirs.keys()].sort(appName)
     .map((name) => ({ name: name, sub: node.dirs.get(name), inReport: appIndexes(node.dirs.get(name)).length > 0 }));
   const leaves = appLeaves(node);
   const inside = leaves.filter((leaf) => leaf.entry === null);

package/src/page/state.js

@@ -11,10 +11,10 @@ import { appDecode } from './payload.js';
  * network: the styling arrives in the same file, and the cell markup follows the rules of the shared part of the styling
  * (`clip`, a commit's caption).
  *
- * The panel remembers the reader's choice between visits and can hand it over as a link ("the choice's memory" below):
- * the record is tied to the report's passport and keeps only what is switched off, by name, so someone else's record is
- * not applied while a vanished name simply means nothing. The same record goes into the address — which is what one
- * sends to a colleague.
+ * The panel remembers the reader's choice between visits ("the choice's memory" below): the record is tied to the
+ * report's passport and keeps only what is switched off, by name, so someone else's record is not applied while a
+ * vanished name simply means nothing. The record stays in the browser's memory and nowhere else: a report opened from
+ * disk keeps a clean address, and a link made in an earlier release is still read (`appLinkUse`).
  *
  * The page draws no conclusion about how a number was obtained: the method of each metric arrives in the data, and the
  * page prints it. There is no second rule of counting here, and no vocabulary of precision either. */
@@ -47,7 +47,10 @@ let appFoldKey = null;
  * on the data, and until the block is unpacked there is nothing to count it from. */
 export function appBoot(text) {
   appData = appDecode(JSON.parse(text));
-  appView = { metrics: {}, files: [], folded: {} };
+  /* The tree is folded as it opens: a project's tree is longer than the window, and the reader's first look is at a
+   * short list rather than at everything. What is remembered is the opposite — the folders the reader unfolded
+   * (`appFoldRead`). */
+  appView = { metrics: {}, files: [], open: {} };
   appMetric = {};
   appMeasured = {};
   appData.metrics.forEach((m) => { appView.metrics[m.key] = true; appMetric[m.key] = m; });
@@ -57,14 +60,12 @@ export function appBoot(text) {
 }
 
 /* A link is that same choice in the address, under a name of its own: someone else's anchor on the page does not count
- * as a link, and there is nothing to argue with it about. */
+ * as a link, and there is nothing to argue with it about. The page does not write it any more — it only reads what came
+ * with the address — and this paragraph is what such a link is read by. */
 const APP_LINK = '#size-report=';
 
-/* Three circumstances of the first drawing, which act on it alone: the address is not rewritten during it (it was sent to
- * the reader rather than the other way), the memory is not touched (a link that came in is not the reader's choice), and
- * the message about the link has not faded yet. */
-let appStartup = true;
-let appForeign = false;
+/* One circumstance of the first drawing, and it acts on it alone: the memory is not written while somebody else's link
+ * is open — what came in is not the reader's choice, and only his own action makes it his. */
 let appTransient = false;
 
 /* -------- the reader's memory of his choice -------- */
@@ -121,59 +122,27 @@ function appRecordOk(rec) {
   return rec !== null && typeof rec === 'object' && rec.v === 1 && rec.passport === appPassport();
 }
 
-/* The address is the link for a colleague, while the memory is the reader's own: the memory is written on the click
- * itself — that is what survives a closing — and the address 200 ms after the last of a burst of switches, because a
- * burst is one link rather than five history entries and five URL parses. The delay is short enough for a person and
- * long enough to swallow a run of clicks; a timer that fires after the page is gone writes nothing useful, which is the
- * price of not writing the address five times. */
-const APP_ADDRESS_DELAY = 200;
-let appAddressTimer = null;
-
-/* An address that came in from outside wins over a write this page has not made yet: a click arms a write, a link
- * arrives within the delay, and the choice left behind must not land on the address the reader was sent — a refused link
- * arms nothing to replace it, so without this the page would rewrite someone else's address a fifth of a second later. */
-export function appAddressDrop() {
-  if (appAddressTimer === null) return;
-  clearTimeout(appAddressTimer);
-  appAddressTimer = null;
-}
-
-function appAddressLater(text) {
-  appAddressDrop();
-  appAddressTimer = setTimeout(() => {
-    appAddressTimer = null;
-    try {
-      window.history.replaceState(null, '', APP_LINK + encodeURIComponent(text));
-    } catch (_e) {
-      /* The browser grants no change of the address: the link is then taken from the browser's memory. */
-    }
-  }, APP_ADDRESS_DELAY);
-}
-
-/* One record for a click and two destinations: the same text goes into the memory and — a moment later — into the
- * address, so the two cannot describe different choices. */
+/* The record goes into the browser's memory and nowhere else: it is written on the click itself, which is what survives
+ * a closing, and the page's address keeps a clean tail — the report is a local page whose address is copied as it is,
+ * and a reader's choice belongs in the browser that made it rather than in the tab's title bar. What a link sent from an
+ * earlier release holds is still read (`appLinkUse`), and it is not written into the reader's memory: what came in is
+ * not his choice until he changes something. */
 export function appWrite() {
+  if (appTransient) return;
   const rec = appRecord();
-  const text = JSON.stringify(rec);
   const empty = Object.keys(rec.metrics).length === 0 && Object.keys(rec.files).length === 0;
-  if (!appTransient) {
-    try {
-      if (empty) window.localStorage.removeItem(appKey);
-      else window.localStorage.setItem(appKey, text);
-    } catch (_e) {
-      /* There is no memory (the browser grants this page none): the choice will not survive a closing, while the numbers
-       * and the markup do not depend on it. */
-    }
+  try {
+    if (empty) window.localStorage.removeItem(appKey);
+    else window.localStorage.setItem(appKey, JSON.stringify(rec));
+  } catch (_e) {
+    /* There is no memory (the browser grants this page none): the choice will not survive a closing, while the numbers
+     * and the markup do not depend on it. */
   }
-  /* But not during the first drawing and not when the link turned out to be someone else's: an address that came in is
-   * not ours, and the reader has yet to read it. */
-  if (appStartup || appForeign) return;
-  appAddressLater(text);
 }
 
 /* A reset to "everything on": the border between "this is no longer in the report" and "switched off" is the record
- * rather than a missing value. A link carries the sender's whole choice, which is why it is applied to a clean view rather
- * than on top of someone else's. */
+ * rather than a missing value. A link carries the sender's whole choice, which is why it is applied to a clean view
+ * rather than on top of someone else's. */
 function appAll() {
   appData.metrics.forEach((m) => { appView.metrics[m.key] = true; });
   appData.files.forEach((_f, i) => { appView.files[i] = true; });
@@ -273,14 +242,15 @@ export function appApply(rec) {
   appData.files.forEach((_f, i) => { if (files[appFileAt(i)] === false) appView.files[i] = false; });
 }
 
-/* -------- the folded tree -------- */
-
+/* -------- the unfolded tree -------- */
 
-/* Folded folders are a memory of the same kind as the choice, but of a record of their own: it is about how much of the
- * tree is visible rather than about which numbers are read. Hence it does not go into the address: a link is sent for the
- * sake of the numbers, while an unfolded tree is the onlooker's business. As with the choice, only what is folded is kept
- * (`true`), and a folder's name is its path ("src/page"), so a vanished name simply means nothing. `appFoldKey` is
- * set with the rest of the model (`appBoot`), for the reason the key itself is. */
+/* How much of the tree is visible is a memory of the same kind as the choice, but of a record of its own: it is about
+ * what the onlooker looks at rather than about which numbers are read, which is why it never goes into a link and never
+ * leaves the browser. The tree opens folded, so **the unfolded folders are what is kept** (`true`) — the default is the
+ * absence of the name, the same way "switched on" is the absence of a choice. A folder's name is its path ("src/page"),
+ * so a vanished name simply means nothing, and unfolding nothing is the state the page opens in: then the record is not
+ * kept at all rather than being kept empty. `appFoldKey` is set with the model (`appBoot`), for the reason the key
+ * itself is. */
 export function appFoldRead() {
   let text = null;
   try {
@@ -296,19 +266,19 @@ export function appFoldRead() {
     return;
   }
   if (!appRecordOk(rec)) return;
-  const folded = rec.folded || {};
-  Object.keys(folded).forEach((p) => { if (folded[p] === true) appView.folded[p] = true; });
+  const open = rec.open || {};
+  Object.keys(open).forEach((p) => { if (open[p] === true) appView.open[p] = true; });
 }
 
-export function appFoldSet(path, folded) {
-  if (folded) appView.folded[path] = true;
-  else delete appView.folded[path];
-  const rec = { v: 1, passport: appPassport(), folded: Object.assign({}, appView.folded) };
+export function appFoldSet(path, open) {
+  if (open) appView.open[path] = true;
+  else delete appView.open[path];
+  const rec = { v: 1, passport: appPassport(), open: Object.assign({}, appView.open) };
   try {
-    if (Object.keys(rec.folded).length === 0) window.localStorage.removeItem(appFoldKey);
+    if (Object.keys(rec.open).length === 0) window.localStorage.removeItem(appFoldKey);
     else window.localStorage.setItem(appFoldKey, JSON.stringify(rec));
   } catch (_e) {
-    /* There is no memory: what is folded will not survive a closing, while the view does not depend on it — the tree is
-     * folded exactly the way the reader folded it just now. */
+    /* There is no memory: what is unfolded will not survive a closing, while the view does not depend on it — the tree
+     * is unfolded exactly the way the reader unfolded it just now. */
   }
 }

package/src/page/table.js

@@ -253,7 +253,9 @@ export function appBody(files, metrics, cache) {
 export function appTable(grid) {
   const metrics = appData.metrics.map((m) => m.key);
   const files = appOrder();
-  const cache = { grid: grid, keys: metrics, cols: [], spans: [], cells: [], sums: [], all: [] };
+  const cache = { grid: grid, keys: metrics, cols: [], drawn: [], spans: [], cells: [], sums: [], all: [] };
+  /* The columns are built shown: that is the state the nodes carry before anything is drawn. */
+  files.forEach((i) => { cache.drawn[i] = true; });
   metrics.forEach(() => {
     cache.cells.push([]);
     cache.sums.push([]);
@@ -269,10 +271,28 @@ export function appTable(grid) {
   return cache;
 }
 
+/* How many nodes a file's column holds — its cells, its captions and its `<col>`. It is the unit the page's bar
+ * counts in (`appDraw`), so it is answered here, where the column's nodes are: the choice's state costs arithmetic,
+ * and the nodes are the table's business. */
+export function appColumnSize(cache, i) {
+  return cache.cols[i].length;
+}
+
+/* Whether a file's column has to be drawn at all: `drawn` is the state its nodes carry (the table is built with every
+ * column shown), so a column that is on and was never drawn is already right. The first drawing of a report has
+ * nothing switched off and therefore costs nothing, and a record from the memory or a link queues exactly the columns
+ * that differ from it — on a table of a few hundred thousand cells that is the difference between a page that opens
+ * and a page that works for a minute after opening. */
+export function appColumnStale(cache, i) {
+  return cache.drawn[i] !== (appView.files[i] === true);
+}
+
 /* A file's column shown or hidden: its cells and its headings together, one class per node and no new node. A hidden
- * column keeps its place in the markup — the order of the columns is the files' business, not the choice's. */
+ * column keeps its place in the markup — the order of the columns is the files' business, not the choice's. What the
+ * nodes carry is remembered (`drawn`), or a repeated switch would walk a column nobody has to see again. */
 export function appColumn(cache, i, on) {
   cache.cols[i].forEach((node) => node.classList.toggle('off', !on));
+  cache.drawn[i] = on;
 }
 
 /* A file's share of the totals: switched off it takes exactly its own numbers out of the running sums, switched on

package/src/page/work.js

@@ -0,0 +1,55 @@
+/* The page's long work, and the stripe that says it is going on.
+ *
+ * A switch on a file's box changes a class on every node of that file's column, and a folder or a category is that same
+ * work over every file below it. That alone is cheap — measured at about 2 µs a node, so a whole category of this
+ * repository's report (73 columns, 55 042 nodes) is 120 ms of it — but it is not the price. **The browser lays this
+ * table out again for any change of a column's visibility, and that is close to a second on a table of a few hundred
+ * thousand cells** (`probes/step-12-columns.mjs`: 1 cell toggled 234 ms of layout, 750 cells 287 ms, 6 000 cells
+ * 539 ms, and the whole click on the shipped page 867 ms blocked with a 742 ms task).
+ *
+ * Hence the shape of this chapter, and it is a decision rather than a default. The drawing of a switch is **one task**:
+ * what is queued is drawn in a single go, one layout, one repaint. Slicing it — a queue worked off between timeouts —
+ * was written first and measured (Chrome 153, this repository's report): 37 slices of two columns each paid the table's
+ * relayout 37 times, 2.5–4 s a slice, 95 frames and 169 layouts of 151.9 s of pure layout time against 1.04 s for the
+ * same click when it is not sliced, with the tab growing to several gigabytes of repaint. The slice is the thing that
+ * freezes the page, only more often, so there is none.
+ *
+ * What is left is honesty about it: work short enough to be over before the browser could paint a stripe is done on the
+ * click itself, and above that the stripe appears, the drawing happens in the next task, and the stripe goes away —
+ * so a reader sees that the page is working rather than wondering whether it hung. The stripe carries no share: within
+ * one task the browser cannot repaint, so a bar that filled would be a bar that lies, and the page already knows the
+ * one thing that is true about it (the work is going on).
+ */
+
+/* Above this much node work the drawing is one task with a stripe rather than a task on the click: a stripe that
+ * appears and disappears within the same frame is worse than none, and the figure is one file's column of a report of
+ * this repository's size (754 nodes). */
+export const APP_LONG = 2000;
+
+/* The stripe: on while a switch is being drawn, off when it is done. There is nothing to count here, and the length is
+ * carried by the styling (an indeterminate stripe), which is why this function takes a switch rather than a share. */
+export function appBar(shown) {
+  const bar = document.getElementById('bar');
+  if (bar !== null) bar.hidden = !shown;
+}
+
+/* What a switch asks for: `items` are the columns that have to be drawn (`{i, units}` — the file's index and the nodes
+ * of its column), `step` draws one of them from the view, and the total decides whether the drawing is the reader's own
+ * click or the next task with the stripe over it. Only the columns out of step with the view are asked for at all
+ * (`appColumnStale`), so a report opened with everything switched on has nothing to draw here. */
+export function appDraw(step, items) {
+  /* Counted by a plain walk rather than by `reduce`: the page's shell is held to a rule that it counts no totals of the
+   * table itself, and a guard that has to tell a sum of nodes from a sum of numbers is a guard that will be argued with
+   * one day. The count of nodes is not one of the report's numbers. */
+  let units = 0;
+  items.forEach((item) => { units += item.units; });
+  if (units <= APP_LONG) {
+    items.forEach((item) => step(item.i));
+    return;
+  }
+  appBar(true);
+  setTimeout(() => {
+    items.forEach((item) => step(item.i));
+    appBar(false);
+  }, 0);
+}