Page state

What stands where the content would be when there is none, or when it could not be shown: one sentence that says what happened and what to do, and at most one action.

Part of a window whose page header shows the path Home, Downloads, old, and under it, where the first row would start, one sentence: Nothing in this folder. Drop files here to move them in.

Use it on a page that has nothing to show yet or could not show it: an empty folder, a drive that was removed, a search with no match. It carries no picture, no title and no second line. A page that is only slow is not in a state: its rows appear as they are read, and the line under the page header shows the reading.

Nothing, failed and reading

Three pages, numbered, each under its page header: an empty folder with one sentence; a removed drive with the warning symbol, a sentence and the action Go to Home; and a page still being read, with an accent stretch along the header's line and the first rows already there.

Nothing hereOne sentence in the main ink.
FailedThe warning symbol in the risk ink before the sentence, and one action under it, a forward Slab, when there is something to do.
ReadingNot a state of this part. The page header's loading runs a stretch along its line while rows appear as they are read, with no spinner on the page.

Anatomy

A failed page state with numbered callouts: the warning symbol, the end of the sentence, and the action Go to Home. — A failed page state.

WarningOnly on a failure, in the risk ink. The sentence also says it failed, so the symbol is never the only sign.
SentenceOne sentence at body size, in the main ink. It says what happened and what to do. It wraps at 560 pixels, or at maxWidth in a narrow column.
ActionAt most one, as a forward Slab. It does the one thing the sentence suggests.

Sizes

A page header and under it a failed page state, with the state's place measured: 104 pixels down from the top of the page and 40 pixels in. — The place of the state on a page.

Part	Value
Place	40 pixels in from the page, 104 down from its top (the header is 72, then 32 of room); never centred
Sentence	17 pixels (`body`), wraps at 560 by default (`maxWidth`)
Warning	The 20-pixel symbol, 10 before the sentence
Space to the action	16 pixels

Keys and pointer

The sentence takes no keys. The action is one stop for Tab, and shows the focus ring after a key.

Do this	To
`Enter` or `Space`	Do the action (`activated`)
Click the action	The same

Accessibility

An empty page is static text, read as its sentence. A failure is read as an alert, so a screen reader announces it when it appears.
A failure is said in words as well as by the warning symbol and its colour.
The action is a button named by its words: "Go to Home".
The ink of the sentence is the main ink, at APCA contrast 92 on both palettes.

Writing

Say what happened, then what to do, in one sentence, in plain words. "Nothing in this folder. Drop files here to move them in." "TRANSFER was removed. Plug it in again to see its files." Name the thing as it is named elsewhere on the page. No apology, no exclamation mark, no "Oops", no encouragement. The action is a verb phrase for where it takes you: "Go to Home".

Do and don't

A page state in the corner where the first row would start: Nothing in this folder. Drop files here to move them in. — DoSay what happened and what to do, in one sentence, where the first row would start.

The page's middle with a large folder symbol, the words Oops, nothing here yet! and a line under them, Add some files to get started. — Don'tCentre a picture, a cheerful title and a second line in the page. The page looks like an advert for itself, and the one useful thing, what to do, is the least clear.

Code

import Tacit.Kit

PageHeader { crumbs: ["Home"]; here: drive.name; loading: drive.reading }
PageState {
    x: 40; y: 104                         // where the first row would start
    visible: !drive.present
    failure: true
    text: drive.name + " was removed. Plug it in again to see its files."
    action: "Go to Home"
    onActivated: go("home")
}

Property or signal	What it does
`text`	The sentence
`failure`	The warning symbol in the risk ink before it
`action`	The one action's words; none if empty
`maxWidth`	Where the sentence wraps (560); set it for a narrow column
`activated()`	The action was activated

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.