Demo: add placeholder views #337

iisa · 2024-01-04T01:23:37Z

add demos of how to trigger various placeholder views
- new: empty set with frame
- note: demo not perfect. the last option "placeholder loading", when selected, you cannot select the other empty options. BUT if you select empty options from top-down, you can see error messaging.
move setPlaceholder call out of lifecycle since it is an anti-pattern
- see: https://lit.dev/docs/components/rendering/#writing-a-good-render()-method
- new home: willUpdate lifecycle - as a render cycle will be called & any state set there will not re-trigger load
  - see: https://lit.dev/docs/components/lifecycle/#willupdate

Testing: https://internetarchive.github.io/iaux-collection-browser/pr/pr-337

click "Placeholder loading" -> coll-brwsr frame loads "searching..."
search for "cats" using search input field -> search request gets fired && results display
👍
this interaction and "empty results UI" will be trialed and used as interstitial between Tab loads on profile page. hopefully this clears collection browser such that it retriggers requests for appropriate tab

…age mode

- this breaks View when dynamically toggling sort bar on an already loaded collection browser

… - WEBDEV-6801

github-actions · 2024-01-04T01:24:31Z

PR Preview Action v1.4.6
🚀 Deployed preview to https://internetarchive.github.io/iaux-collection-browser/pr/pr-337/
on branch `gh-pages` at 2024-01-04 06:48 UTC

…lUpdate

iisa · 2024-01-04T06:41:02Z

src/collection-browser.ts

 */
- if (!model && !this.isScrollingToCell) {
+ if (!this.placeholderType && !model && !this.isScrollingToCell) {


this block fires even though we render the placeholder. this reduces fetch checks since we request details for each result...

… on empty base query

src/app-root.ts

nsharma123 · 2024-01-04T06:53:31Z

src/app-root.ts

@@ -489,6 +538,50 @@ export class AppRoot extends LitElement {
 }
 }

+ private async showEmptyPlaceholder(placeholderType: string) {
+ switch (placeholderType) {
+ case 'empty query':


I know we are on demo for developers but we should not use string slugs for checking conditions. I would write these something like empty-query, empty-collection, empty-profile something like this.

nsharma123 · 2024-01-04T06:54:46Z

src/collection-browser.ts

 const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
+ console.warn('****** FETCH PAGE tileModelAtCellIndex', {


can you please our custom log() function to render logs messages for development purpose?

yes I can remove these, actually once we get stable work on offshoot 👍

nsharma123 · 2024-01-04T06:55:36Z

src/collection-browser.ts

@@ -995,7 +1002,15 @@ export class CollectionBrowser
 this.restoreState();
 }

+ willUpdate() {
+ this.setPlaceholderType();


Just curious, when willUpdate() function executes? (still learning)

nsharma123 · 2024-01-04T06:56:16Z

src/collection-browser.ts

- this.baseQuery,
- JSON.stringify(this.selectedFacets)
- );
+ console.log('CB will reset', {


let's add our log() util function here.

latonv added 30 commits December 12, 2023 17:22

Create basic state management setup

48265cd

Facet state refactoring to minimize repetition

43ac1a7

Move facet refactor to different branch

91bf555

First pass extracting CB data source into a reactive controller

c817ada

Better abstraction for data source

e0d95af

Setup for reactive controller lifecycle

b19c88f

Top-level exports for data source

2854c82

Remove obsolete state management stub

2c07607

Build out some more robust interfaces for state management

489ee52

Facet state adjustments

948f4a2

Facet state adjustments

91240b6

Migrate tile mapping function into new data source

f86d31a

Add methods for tile mapping & check/unchecking to interface

8421e0b

Migrate tile mapping/checking methods into data source

4bb59d1

Keep track of data source size

3fed8b5

Adjust some cb methods to delegate to data source

f67a807

Include data source size in interface

dba016e

Minor adjustments to how cb retrieves cell models

f4def02

Reorganize some properties

8dda6a7

Request host updates from reactive controller

334246d

Fix some tests

de81037

Add script for quicker test running

ba242f2

Streamline models

f08df72

Conform collection browser to search state model

446072d

Convert derived sortParam property into getter

ab66930

Fix some breaking tests related to sortParam

9d3483b

Fix a model property naming issue

9c65176

Connect up data source w/ cb query change handlers

5490564

Model updates for cb host

9138106

Migrate several fetch methods over to data source

4517c50

latonv and others added 12 commits December 20, 2023 02:37

Use hits/aggregations from page_elements branch if available

354c71e

Rely on search service to handle page_element unpacking

c087fda

Emit event for any query state changes

4240893

Add debug logging & fix result count bug

3f2ad00

Fix package version

c75e755

Fix broken test

9588030

Properly reset endOfDataReached upon query change

8b77dff

Fix a bug where checking tile in manage view doesn't work

d60368e

Ensure result views are refreshed when checking/unchecking all in man…

c657f97

…age mode

Sort Bar Test - Ensure Resize Observer fires ONLY when needed

1a40ab0

- this breaks View when dynamically toggling sort bar on an already loaded collection browser

TESTS - Fix some, comment some out that need rework with the refactor…

f0b9733

… - WEBDEV-6801

demo: add placeholder views

6004db0

iisa changed the base branch from webdev6081-state-management to resize-observer-loan-tab-fix January 4, 2024 01:24

iisa added 4 commits January 3, 2024 17:58

add empty frame placeholder to demo

317b916

clean up anti-pattern: move setPlaceholderType out of render to wil…

c7a3ed5

…lUpdate

Checkpoint: 1.14.17-beta.3 - log tweaks, + clean demo

9b3bade

checkpoint: 1.14.17-beta.4 - facet fetch logging

4dabdfc

iisa commented Jan 4, 2024

View reviewed changes

checkpoint: 1.14.17-beta.5 - fix red herring, clear infinite scroller…

94a0335

… on empty base query

nsharma123 reviewed Jan 4, 2024

View reviewed changes

src/app-root.ts Show resolved Hide resolved

nsharma123 reviewed Jan 4, 2024

View reviewed changes

latonv force-pushed the resize-observer-loan-tab-fix branch from f0b9733 to e46fed6 Compare January 15, 2024 21:25

Base automatically changed from resize-observer-loan-tab-fix to webdev6081-state-management January 16, 2024 23:31

latonv force-pushed the webdev6081-state-management branch 2 times, most recently from 12f72f6 to 2b23159 Compare January 26, 2024 00:08

Base automatically changed from webdev6081-state-management to main January 26, 2024 23:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Demo: add placeholder views #337

Demo: add placeholder views #337

iisa commented Jan 4, 2024 •

edited

Loading

github-actions bot commented Jan 4, 2024 •

edited

Loading

iisa Jan 4, 2024

nsharma123 Jan 4, 2024

nsharma123 Jan 4, 2024

iisa Jan 4, 2024

nsharma123 Jan 4, 2024 •

edited

Loading

nsharma123 Jan 4, 2024

		const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
		console.warn('****** FETCH PAGE tileModelAtCellIndex', {

Demo: add placeholder views #337

Are you sure you want to change the base?

Demo: add placeholder views #337

Conversation

iisa commented Jan 4, 2024 • edited Loading

Testing: https://internetarchive.github.io/iaux-collection-browser/pr/pr-337

github-actions bot commented Jan 4, 2024 • edited Loading

iisa Jan 4, 2024

Choose a reason for hiding this comment

nsharma123 Jan 4, 2024

Choose a reason for hiding this comment

nsharma123 Jan 4, 2024

Choose a reason for hiding this comment

iisa Jan 4, 2024

Choose a reason for hiding this comment

nsharma123 Jan 4, 2024 • edited Loading

Choose a reason for hiding this comment

nsharma123 Jan 4, 2024

Choose a reason for hiding this comment

iisa commented Jan 4, 2024 •

edited

Loading

github-actions bot commented Jan 4, 2024 •

edited

Loading

nsharma123 Jan 4, 2024 •

edited

Loading