Tweak loading tombstones for collection page compact list view

internetarchive · Jan 4, 2024 · ab5a623 · ab5a623
1 parent 8769919
commit ab5a623
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/src/app-root.ts b/src/app-root.ts
@@ -404,6 +404,31 @@ export class AppRoot extends LitElement {
               </label>
             </div>
           </fieldset>
+
+          <fieldset class="user-profile-controls">
+            <legend>Set Placeholder Types</legend>
+            <div class="checkbox-control">
+              <input
+                id="enable-loading-placeholder"
+                type="radio"
+                @click=${() => this.setPlaceholderType('loading-placeholder')}
+                name="placeholder-radio"
+              />
+              <label for="enable-loading-placeholder"
+                >Loading Placeholder</label
+              >
+            </div>
+            <div class="checkbox-control">
+              <input
+                id="enable-empty-placeholder"
+                type="radio"
+                @click=${() => this.setPlaceholderType('error-placeholder')}
+                value="empty-placeholder"
+                name="placeholder-radio"
+              />
+              <label for="enable-empty-placeholder">Empty Placeholder</label>
+            </div>
+          </fieldset>
         </div>
         <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
           Toggle Search Controls
@@ -437,6 +462,20 @@ export class AppRoot extends LitElement {
     `;
   }
 
+  private async setPlaceholderType(type: String) {
+    switch (type) {
+      case 'loading-placeholder':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.suppressPlaceholders = true;
+        this.collectionBrowser.clearResultsOnEmptyQuery = true;
+        this.requestUpdate();
+        await this.collectionBrowser.updateComplete;
+        break;
+      default:
+        break;
+    }
+  }
+
   private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {
     this.searchQuery = e.detail.baseQuery;
   }

diff --git a/src/collection-browser.ts b/src/collection-browser.ts
@@ -417,7 +417,7 @@ export class CollectionBrowser
   }
 
   render() {
-    this.setPlaceholderType();
+    // this.setPlaceholderType();
     return html`
       <div
         id="content-container"
@@ -1095,6 +1095,10 @@ export class CollectionBrowser
     this.restoreState();
   }
 
+  willUpdate() {
+    this.setPlaceholderType();
+  }
+
   updated(changed: PropertyValues) {
     if (changed.has('placeholderType') && this.placeholderType === null) {
       if (!this.leftColIntersectionObserver) {
@@ -2747,9 +2751,9 @@ export class CollectionBrowser
             --collectionBrowserCellMinWidth,
             100%
           );
-          --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
           --infiniteScrollerCellMaxHeight: 56px;
-          --infiniteScrollerRowGap: 0px;
+          --infiniteScrollerRowGap: 10px;
         }
 
         infinite-scroller.list-detail {

diff --git a/src/tiles/list/tile-list-compact.ts b/src/tiles/list/tile-list-compact.ts
@@ -167,7 +167,7 @@ export class TileListCompact extends BaseTileComponent {
         align-items: center;
         line-height: 20px;
         padding-top: 5px;
-        padding-bottom: 5px;
+        margin-bottom: -5px;
       }
 
       #list-line.mobile {