feat: loading state using skeleton span

package.json

@@ -74,7 +74,7 @@
 		"@neovici/cosmoz-dropdown": "^4.4.0",
 		"@neovici/cosmoz-input": "^5.0.2",
 		"@neovici/cosmoz-utils": "^6.0.0",
-		"@pionjs/pion": "^2.0.0",
+		"@pionjs/pion": "^2.7.1",
 		"lit-html": "^2.0.0 || ^3.0.0"
 	},
 	"devDependencies": {

src/autocomplete/autocomplete.ts

@@ -1,8 +1,8 @@
-import { html, nothing } from 'lit-html'; // eslint-disable-line object-curly-newline
+import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
 import { live } from 'lit-html/directives/live.js';
 import { until } from 'lit-html/directives/until.js';
 import { when } from 'lit-html/directives/when.js';
-import { useCallback } from '@pionjs/pion';
+import { useCallback, useEffect, useState } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import '@neovici/cosmoz-input';
@@ -31,14 +31,13 @@ type AProps<I> = Omit<Props<I>, keyof RProps<I>> &
 		onInputRef?: (el?: Element) => void;
 	};
 
-const blank = () => nothing;
-
 const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
 	.map((part) => `${part}: input-${part}`)
 	.join();
 
 const autocomplete = <I>(props: AProps<I>) => {
 		const {
+				active,
 				invalid,
 				errorMessage,
 				label,
@@ -68,6 +67,14 @@ const autocomplete = <I>(props: AProps<I>) => {
 				[host, value],
 			);
 
+		const [loading, setLoading] = useState(false);
+		useEffect(() => {
+			// TODO: handle `source$` changes that occur while `loading`
+			setLoading(true);
+			const endLoading = setLoading.bind(null, false);
+			source$.then(endLoading, endLoading);
+		}, [source$]);
+
 		useImperativeApi(
 			{
 				focus: () =>
@@ -121,18 +128,15 @@ const autocomplete = <I>(props: AProps<I>) => {
 					textual,
 					disabled,
 				})}
-				${until(
-					source$.then(blank, blank),
-					html`<div slot="suffix" class="spinner"></div>`,
-				)}
 			</cosmoz-input>
 
-			${when((!isSingle || showSingle) && items.length, () =>
+			${when(active && (loading || items.length > 0) && !(isSingle && !showSingle), () =>
 				listbox<I>({
 					...props,
 					anchor,
 					items,
 					multi: !isOne,
+					loading,
 				}),
 			)}`;
 	},

src/autocomplete/styles.css.ts

@@ -53,26 +53,4 @@ export default css`
 	slot {
 		display: contents !important;
 	}
-	
-	@keyframes rotateAnimation {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.spinner {
-		border-radius: 50%;
-		width: 22px;
-		height: 22px;
-		border: 2px solid rgba(0, 0, 0, 0.1);
-		border-top: 2px solid #5f5a92;
-		animation: rotateAnimation 1.2s infinite
-			cubic-bezier(0.785, 0.135, 0.15, 0.86);
-		box-sizing: border-box;
-		margin-top: -3px;
-		flex: none;
-	}
 `;

src/listbox/item-renderer.ts

@@ -1,6 +1,8 @@
-import { html, TemplateResult } from 'lit-html';
+import './skeleton-span';
+
 import { identity } from '@neovici/cosmoz-utils/function';
-import { mark } from './util';
+import { html, TemplateResult } from 'lit-html';
+import { loadingSymbol, mark } from './util';
 
 export interface Opts<I> {
 	highlight: (i: number) => void;
@@ -13,15 +15,15 @@ export interface Opts<I> {
 export type Render<I> = (content: unknown, item: I, i: number) => unknown;
 
 export type ItemRenderer<I> = (
-	item: I,
+	item: I | typeof loadingSymbol,
 	i: number,
-	opts: Opts<I>
+	opts: Opts<I>,
 ) => TemplateResult;
 
 export const itemRenderer =
 	<I>(render: Render<I> = identity) =>
 	(
-		item: I,
+		item: I | typeof loadingSymbol,
 		i: number,
 		{
 			highlight,
@@ -35,12 +37,17 @@ export const itemRenderer =
 			isSelected: (item: I) => void;
 			query: string;
 			textual: (i: I) => string;
-		}
+		},
 	): TemplateResult => {
+		if (item === loadingSymbol) {
+			return html`<div class="item">
+				<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>
+			</div>`;
+		}
+
 		const text = textual(item),
 			content = mark(text, query),
 			rendered = render(content, item, i);
-
 		return html` <div
 				class="item"
 				role="option"

src/listbox/skeleton-span.ts

@@ -0,0 +1,30 @@
+import { component, css } from '@pionjs/pion';
+import { nothing } from 'lit-html';
+
+const style = css`
+	:host {
+		display: inline-block;
+		vertical-align: middle;
+		background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
+		background-size: 1000%;
+		background-position: right;
+		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
+		border-radius: 3px;
+		width: 100px;
+		height: 20px;
+	}
+
+	@keyframes sweep {
+		0% {
+			background-position: right;
+		}
+		100% {
+			background-position: left;
+		}
+	}
+`;
+
+customElements.define(
+	'cosmoz-autocomplete-skeleton-span',
+	component(() => nothing, { styleSheets: [style] }),
+);

src/listbox/use-listbox.ts

@@ -1,7 +1,7 @@
 import { useMemo } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { usePosition, Placement } from '@neovici/cosmoz-dropdown/use-position';
-import { byValue } from './util';
+import { byValue, loadingSymbol } from './util';
 import { useItems } from './use-items';
 import { useRenderItem, ItemRenderer } from './use-render-item';
 
@@ -19,6 +19,7 @@ export const properties = [
 	'defaultIndex',
 	'value',
 	'valueProperty',
+	'loading',
 ];
 
 export interface Props<I> {
@@ -35,6 +36,7 @@ export interface Props<I> {
 	anchor?: () => HTMLElement | null;
 	confinement?: HTMLElement;
 	placement?: Placement;
+	loading?: boolean;
 }
 
 export const useListbox = <I>({
@@ -48,16 +50,21 @@ export const useListbox = <I>({
 	itemRenderer,
 	itemHeight = 40,
 	itemLimit = 5,
+	loading,
 	...thru
 }: Props<I>) => {
 	const isSelected = useMemo(
 			() => byValue(value, valueProperty),
-			[value, valueProperty]
+			[value, valueProperty],
 		),
 		// TODO: investigate if we can drop this
-		items = useMemo(() => _items.slice(), [_items, isSelected]),
+		__items = useMemo(() => _items.slice(), [_items, isSelected]),
+		items: (I | typeof loadingSymbol)[] = useMemo(
+			() => (loading ? [...__items, loadingSymbol] : __items),
+			[loading, __items],
+		),
 		{ position, highlight, select } = useItems({
-			items,
+			items: __items,
 			onSelect,
 			defaultIndex: isNaN(defaultIndex as number)
 				? undefined

src/listbox/use-render-item.ts

@@ -5,14 +5,15 @@ import {
 	ItemRenderer,
 	Opts,
 } from './item-renderer';
+import { loadingSymbol } from './util';
 
 export const useRenderItem = <I>({
 	itemRenderer = mkItemRenderer<I>(),
 	...meta
 }: Opts<I> & { itemRenderer?: ItemRenderer<I> }) => {
 	const info = useMeta<Opts<I>>(meta);
 	return useCallback(
-		(item: I, i: number) => itemRenderer(item, i, info),
+		(item: I | typeof loadingSymbol, i: number) => itemRenderer(item, i, info),
 		[info, itemRenderer]
 	);
 };

src/listbox/util.ts

@@ -4,7 +4,7 @@ import { Rec } from '@neovici/cosmoz-utils/object';
 
 export const byValue = <K extends PropertyKey | undefined, T>(
 	value: T | T[],
-	valueProperty: K
+	valueProperty: K,
 ) => {
 	if (!valueProperty) {
 		return (item: T) => array(value).includes(item);
@@ -13,7 +13,7 @@ export const byValue = <K extends PropertyKey | undefined, T>(
 		array(value).find(
 			(value) =>
 				(value as Rec<NonNullable<K>>)[valueProperty] ===
-				(item as Rec<NonNullable<K>>)[valueProperty]
+				(item as Rec<NonNullable<K>>)[valueProperty],
 		);
 };
 export const mark = (text: string, query: string) => {
@@ -31,3 +31,5 @@ export const mark = (text: string, query: string) => {
 		text.slice(end),
 	];
 };
+
+export const loadingSymbol: unique symbol = Symbol('loading');