Delayed placeholders

Author: fongandrew

src/demos/placeholders-demo.tsx

@@ -7,8 +7,11 @@ import {
 } from '~/shared/components/card';
 import {
 	ChatPlaceholder,
+	DelayedPlaceholder,
 	ImgPlaceholder,
+	InlineDelayedPlaceholder,
 	InlineMissingPlaceholder,
+	MissingPlaceholder,
 	ParagraphPlaceholder,
 } from '~/shared/components/placeholder';
 
@@ -26,7 +29,17 @@ export function PlaceholdersDemo() {
 						<ImgPlaceholder aspectRatio={3 / 4} />
 						<ImgPlaceholder aspectRatio={16 / 9} />
 					</div>
-					<InlineMissingPlaceholder />
+					<div class="o-group">
+						<div>
+							<InlineMissingPlaceholder />
+						</div>
+						<InlineDelayedPlaceholder delay={5000}>
+							<InlineMissingPlaceholder />
+						</InlineDelayedPlaceholder>
+					</div>
+					<DelayedPlaceholder>
+						<MissingPlaceholder />
+					</DelayedPlaceholder>
 					<ParagraphPlaceholder />
 					<ImgPlaceholder height={150} width={300} />
 				</div>

src/shared/components/callbacks/index.ts

@@ -13,6 +13,7 @@ import * as menu from '~/shared/components/callbacks/menu';
 import * as modal from '~/shared/components/callbacks/modal';
 import * as modalForm from '~/shared/components/callbacks/modal-form';
 import * as optionList from '~/shared/components/callbacks/option-list';
+import * as placeholder from '~/shared/components/callbacks/placeholder';
 import * as scroll from '~/shared/components/callbacks/scroll';
 import * as select from '~/shared/components/callbacks/select';
 import * as sidebar from '~/shared/components/callbacks/sidebar';
@@ -37,6 +38,7 @@ loadCallbacks(
 	modal,
 	modalForm,
 	optionList,
+	placeholder,
 	scroll,
 	select,
 	sidebar,

src/shared/components/callbacks/placeholder.ts

@@ -0,0 +1,22 @@
+import { createMounter } from '~/shared/utility/callback-attrs/mount';
+import { parseIntOrNull } from '~/shared/utility/parse';
+
+export const PLACEHOLDER_DELAY_ATTR = 'data-delay';
+
+export const placeholderDelayedShow = createMounter('$p-placeholder__delayed-show', async (el) => {
+	el.classList.add('t-hidden');
+	const delay = parseIntOrNull(el.getAttribute(PLACEHOLDER_DELAY_ATTR) ?? '0');
+	if (delay && delay > 0) {
+		await new Promise((resolve) => setTimeout(resolve, delay));
+	}
+	el.classList.remove('t-hidden');
+});
+
+export const placeholderDelayedHide = createMounter('$p-placeholder__delayed-hide', async (el) => {
+	el.classList.remove('t-hidden');
+	const delay = parseIntOrNull(el.getAttribute(PLACEHOLDER_DELAY_ATTR) ?? '0');
+	if (delay && delay > 0) {
+		await new Promise((resolve) => setTimeout(resolve, delay));
+	}
+	el.classList.add('t-hidden');
+});

src/shared/components/placeholder.css

@@ -7,19 +7,29 @@
 	.c-placeholder--circle {
 		@mixin v-colors-secondary;
 		@mixin t-shimmer;
+	}
 
+	.c-placeholder::after,
+	.c-placeholder--img::after,
+	.c-placeholder--inline,
+	.c-placeholder--circle,
+	.c-placeholder--missing::after,
+	.c-placeholder--inline-missing {
 		position: relative;
 		overflow: hidden;
 	}
 
 	.c-placeholder::after,
 	.c-placeholder--inline,
-	.c-placeholder--missing {
+	.c-placeholder--missing::after,
+	.c-placeholder--inline-missing {
 		border-radius: 1lh;
 		height: 0.85em;
+		min-height: auto;
 	}
 
-	.c-placeholder {
+	.c-placeholder,
+	.c-placeholder--missing {
 		display: flex;
 		align-items: center;
 
@@ -35,7 +45,7 @@
 	}
 
 	.c-placeholder--inline,
-	.c-placeholder--missing {
+	.c-placeholder--inline-missing {
 		display: inline-block;
 		width: 9em;
 		vertical-align: baseline;
@@ -44,7 +54,8 @@
 		top: 2px;
 	}
 
-	.c-placeholder--missing {
+	.c-placeholder--missing::after,
+	.c-placeholder--inline-missing {
 		@mixin v-colors-card;
 		@mixin t-border;
 	}

src/shared/components/placeholder.tsx

@@ -4,6 +4,12 @@ import cx from 'classix';
 import { For, type JSX, splitProps, Suspense } from 'solid-js';
 import { isServer } from 'solid-js/web';
 
+import {
+	PLACEHOLDER_DELAY_ATTR,
+	placeholderDelayedHide,
+	placeholderDelayedShow,
+} from '~/shared/components/callbacks/placeholder';
+import { callbackAttrs } from '~/shared/utility/callback-attrs/callback-registry';
 import { randInt } from '~/shared/utility/random';
 import { useT } from '~/shared/utility/solid/locale-context';
 
@@ -33,6 +39,45 @@ export function Placeholder(props: PlaceholderProps) {
 	);
 }
 
+/**
+ * Fixed width pill placeholder, used for inline elements in text
+ */
+export function MissingPlaceholder(props: JSX.HTMLAttributes<HTMLSpanElement>) {
+	const [local, rest] = splitProps(props, ['class']);
+	const t = useT();
+
+	return (
+		<span class={cx('c-placeholder--missing', local.class)} aria-label={t`Missing`} {...rest} />
+	);
+}
+
+/**
+ * Show placeholder for a given amount of time before rendering content
+ */
+export function DelayedPlaceholder(props: {
+	delay?: number | undefined;
+	fallback?: JSX.Element;
+	children: JSX.Element;
+}) {
+	return (
+		<>
+			<div
+				{...{ [PLACEHOLDER_DELAY_ATTR]: String(props.delay ?? 3000) }}
+				{...callbackAttrs(placeholderDelayedHide)}
+			>
+				{props.fallback ?? <Placeholder />}
+			</div>
+			<div
+				class="t-hidden"
+				{...{ [PLACEHOLDER_DELAY_ATTR]: String(props.delay ?? 3000) }}
+				{...callbackAttrs(placeholderDelayedShow)}
+			>
+				{props.children}
+			</div>
+		</>
+	);
+}
+
 /**
  * Fixed width pill placeholder, used for inline elements in text
  */
@@ -53,7 +98,38 @@ export function InlineMissingPlaceholder(props: JSX.HTMLAttributes<HTMLSpanEleme
 	const t = useT();
 
 	return (
-		<span class={cx('c-placeholder--missing', local.class)} aria-label={t`Missing`} {...rest} />
+		<span
+			class={cx('c-placeholder--inline-missing', local.class)}
+			aria-label={t`Missing`}
+			{...rest}
+		/>
+	);
+}
+
+/**
+ * Show placeholder for a given amount of time before rendering content
+ */
+export function InlineDelayedPlaceholder(props: {
+	delay?: number | undefined;
+	fallback?: JSX.Element;
+	children: JSX.Element;
+}) {
+	return (
+		<>
+			<span
+				{...{ [PLACEHOLDER_DELAY_ATTR]: String(props.delay ?? 3000) }}
+				{...callbackAttrs(placeholderDelayedHide)}
+			>
+				{props.fallback ?? <InlinePlaceholder />}
+			</span>
+			<span
+				class="t-hidden"
+				{...{ [PLACEHOLDER_DELAY_ATTR]: String(props.delay ?? 3000) }}
+				{...callbackAttrs(placeholderDelayedShow)}
+			>
+				{props.children}
+			</span>
+		</>
 	);
 }