fix: rework loading mechanism

Neovici · Nov 19, 2024 · d09bb44 · d09bb44
1 parent e86fffb
commit d09bb44
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 72 deletions.
diff --git a/src/autocomplete/autocomplete.ts b/src/autocomplete/autocomplete.ts
@@ -1,15 +1,17 @@
-import { html } from 'lit-html'; // eslint-disable-line object-curly-newline
+import '@neovici/cosmoz-input';
+import './skeleton-span';
+
+import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
+import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
+import { useCallback } from '@pionjs/pion';
+import { html, nothing } 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, 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';
-import { useAutocomplete, Props as Base, RProps } from './use-autocomplete';
 import { listbox } from '../listbox';
-import style from './styles.css';
 import { selection } from './selection';
+import style from './styles.css';
+import { Props as Base, RProps, useAutocomplete } from './use-autocomplete';
 import { useOverflow } from './use-overflow';
 
 export interface Props<I> extends Base<I> {
@@ -35,6 +37,8 @@ const inputParts = ['input', 'control', 'label', 'line', 'error', 'wrap']
 	.map((part) => `${part}: input-${part}`)
 	.join();
 
+const blank = () => nothing;
+
 const autocomplete = <I>(props: AProps<I>) => {
 		const {
 				active,
@@ -67,14 +71,6 @@ 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: () =>
@@ -130,14 +126,21 @@ const autocomplete = <I>(props: AProps<I>) => {
 				})}
 			</cosmoz-input>
 
-			${when(active && (loading || items.length > 0) && !(isSingle && !showSingle), () =>
-				listbox<I>({
-					...props,
-					anchor,
-					items,
-					multi: !isOne,
-					loading,
-				}),
+			${when(active && !(isSingle && !showSingle), () =>
+				listbox<I>(
+					{
+						...props,
+						anchor,
+						items,
+						multi: !isOne,
+					},
+					when(items.length < 5, () =>
+						until(
+							source$.then(blank, blank),
+							html`<cosmoz-autocomplete-skeleton-span></cosmoz-autocomplete-skeleton-span>`,
+						),
+					),
+				),
 			)}`;
 	},
 	Autocomplete = <I>(props: Props<I>) => {
@@ -167,4 +170,4 @@ const autocomplete = <I>(props: AProps<I>) => {
 		'wrap',
 	] as const;
 
-export { autocomplete, Autocomplete, observedAttributes, style };
+export { Autocomplete, autocomplete, observedAttributes, style };
diff --git a/src/listbox/skeleton-span.ts → src/autocomplete/skeleton-span.ts b/src/listbox/skeleton-span.ts → src/autocomplete/skeleton-span.ts
@@ -10,9 +10,14 @@ const style = css`
 		background-position: right;
 		animation: sweep 1.5s cubic-bezier(0.3, 1, 0.3, 1) infinite;
 		border-radius: 3px;
-		width: calc(100% - 35px);
+		width: calc(100% - 50px);
 		max-width: 150px;
 		height: 20px;
+		margin: 10px 0 10px 33px;
+	}
+
+	:host-context([show-single]) {
+		margin-left: 20px;
 	}
 
 	@keyframes sweep {

diff --git a/src/listbox/index.ts b/src/listbox/index.ts
@@ -37,18 +37,19 @@ const Listbox = <I>(props: Props<I>) => {
 	);
 
 	return html`<div
-		class="items"
-		${ref((el) => (listRef.current = el))}
-		style="min-height: ${height}px"
-	>
-		<div virtualizer-sizer></div>
-		${virtualize({
-			items,
-			renderItem,
-			scroller: true,
-			layout,
-		})}
-	</div>`;
+			class="items"
+			${ref((el) => (listRef.current = el))}
+			style="min-height: ${height}px"
+		>
+			<div virtualizer-sizer></div>
+			${virtualize({
+				items,
+				renderItem,
+				scroller: true,
+				layout,
+			})}
+		</div>
+		<slot></slot>`;
 };
 
 const supportsPopover = () => {
@@ -71,15 +72,15 @@ customElements.define(
 	component<Props<unknown>>(Listbox, { styleSheets: [sheet(style)] }),
 );
 
-export const listbox = <I>({
-	multi,
-	...thru
-}: Props<I> & { multi?: boolean }) => {
-	return html`<cosmoz-listbox
+export const listbox = <I>(
+	{ multi, ...thru }: Props<I> & { multi?: boolean },
+	content: unknown,
+) =>
+	html`<cosmoz-listbox
 		${ref(showPopover)}
 		popover="manual"
 		part="listbox"
 		?multi=${multi}
 		...=${spreadProps(props(properties)(thru))}
-	></cosmoz-listbox>`;
-};
+		>${content}</cosmoz-listbox
+	>`;
diff --git a/src/listbox/item-renderer.ts b/src/listbox/item-renderer.ts
@@ -1,8 +1,6 @@
-import './skeleton-span';
-
 import { identity } from '@neovici/cosmoz-utils/function';
 import { html, TemplateResult } from 'lit-html';
-import { loadingSymbol, mark } from './util';
+import { mark } from './util';
 
 export interface Opts<I> {
 	highlight: (i: number) => void;
@@ -15,15 +13,15 @@ export interface Opts<I> {
 export type Render<I> = (content: unknown, item: I, i: number) => unknown;
 
 export type ItemRenderer<I> = (
-	item: I | typeof loadingSymbol,
+	item: I,
 	i: number,
 	opts: Opts<I>,
 ) => TemplateResult;
 
 export const itemRenderer =
 	<I>(render: Render<I> = identity) =>
 	(
-		item: I | typeof loadingSymbol,
+		item: I,
 		i: number,
 		{
 			highlight,
@@ -39,12 +37,6 @@ export const itemRenderer =
 			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);

diff --git a/src/listbox/style.css.ts b/src/listbox/style.css.ts
@@ -18,6 +18,7 @@ const style = css`
 			0 1px 8px 0 rgba(0, 0, 0, 0.12),
 			0 3px 3px -2px rgba(0, 0, 0, 0.4);
 		text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
+		overflow: hidden;
 	}
 	:host(:popover-open) {
 		box-sizing: border-box;
@@ -32,7 +33,6 @@ const style = css`
 		position: relative;
 		overflow-y: auto;
 		contain: layout paint !important;
-		height: 100%;
 	}
 	.item {
 		font-size: 14px;
@@ -112,8 +112,8 @@ export const styles = ({
 	itemHeight: number;
 }) => css`
 	:host {
-		min-height: ${itemHeight}px;
-		height: ${height}px;
+		xmin-height: ${itemHeight}px;
+		xheight: ${height}px;
 	}
 
 	.item {

diff --git a/src/listbox/use-listbox.ts b/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, loadingSymbol } from './util';
+import { byValue } from './util';
 import { useItems } from './use-items';
 import { useRenderItem, ItemRenderer } from './use-render-item';
 
@@ -36,7 +36,6 @@ export interface Props<I> {
 	anchor?: () => HTMLElement | null;
 	confinement?: HTMLElement;
 	placement?: Placement;
-	loading?: boolean;
 }
 
 export const useListbox = <I>({
@@ -50,21 +49,16 @@ export const useListbox = <I>({
 	itemRenderer,
 	itemHeight = 40,
 	itemLimit = 5,
-	loading,
 	...thru
 }: Props<I>) => {
 	const isSelected = useMemo(
 			() => byValue(value, valueProperty),
 			[value, valueProperty],
 		),
 		// TODO: investigate if we can drop this
-		__items = useMemo(() => _items.slice(), [_items, isSelected]),
-		items: (I | typeof loadingSymbol)[] = useMemo(
-			() => (loading ? [...__items, loadingSymbol] : __items),
-			[loading, __items],
-		),
+		items = useMemo(() => _items.slice(), [_items, isSelected]),
 		{ position, highlight, select } = useItems({
-			items: __items,
+			items,
 			onSelect,
 			defaultIndex: isNaN(defaultIndex as number)
 				? undefined

diff --git a/src/listbox/use-render-item.ts b/src/listbox/use-render-item.ts
@@ -5,15 +5,14 @@ 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 | typeof loadingSymbol, i: number) => itemRenderer(item, i, info),
+		(item: I, i: number) => itemRenderer(item, i, info),
 		[info, itemRenderer]
 	);
 };

diff --git a/src/listbox/util.ts b/src/listbox/util.ts
@@ -30,6 +30,4 @@ export const mark = (text: string, query: string) => {
 		html`<mark>${text.slice(i, end)}</mark>`,
 		text.slice(end),
 	];
-};
-
-export const loadingSymbol: unique symbol = Symbol('loading');
+};