Skip to content

feat(core): fill the unified search pending window with placeholders - #63343

Merged
pringelmann merged 3 commits into
masterfrom
feat/search-skeleton-loaders
Aug 19, 2026
Merged

feat(core): fill the unified search pending window with placeholders#63343
pringelmann merged 3 commits into
masterfrom
feat/search-skeleton-loaders

Conversation

@pringelmann

@pringelmann pringelmann commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Summary

The new unified search bar clears its results on every keystroke, so the panel collapses to the filter row for the debounce plus the request, then jumps back down as category results arrive. Two jumps per letter typed.

Now it maintains the height it had and fills the gap with skeleton placeholders: a heading bar, then result-height rows. Resizes now also animate instead of snapping. (respecting user's preferred motion setting)

For now only the first skeleton heading is drawn. Where the next one goes depends on how many results a category returns, and a heading in the wrong spot looks worse than a plain bar. We can iterate on this after release.

Before

Kooha-2026-08-18-08-51-13.webm

After

Kooha-2026-08-18-08-49-52.webm

-> Preview link <-

u: bob p: bob

Manually tested

  • Safari (16.5)
  • Firefox
  • Chromium

Checklist

  • Code is properly formatted
  • Sign-off message is added to all commits
  • Tests (unit, integration, api and/or acceptance) are included
  • Screenshots before/after for front-end changes
  • Documentation (manuals or wiki) has been updated or is not required
  • Backports requested where applicable (ex: critical bugfixes)
  • Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
  • Milestone added for target branch/version (ex: 32.x for stable32)

AI (if applicable)

  • The content of this PR was partly or fully generated using AI (CSS animations, tests)

@pringelmann pringelmann self-assigned this Aug 18, 2026
@pringelmann pringelmann added design Design, UI, UX, etc. feature: search enhancement team: IDP Code maintained by 🪪 IDP team labels Aug 18, 2026
@pringelmann pringelmann added this to the Nextcloud 35 milestone Aug 18, 2026
@pringelmann
pringelmann force-pushed the feat/search-skeleton-loaders branch 2 times, most recently from 1358c60 to 1567632 Compare August 18, 2026 07:44
const RESULTS_PER_CATEGORY = 3

/** Fallback when there is no results box on screen to measure. */
const DEFAULT_HELD_HEIGHT_PX = 332

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Default derived from three providers with one result each. We can tweak this over time if its too jumpy.

Another solution is to keep a running average height stored in localstorage, but that feels like overkill

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or not show any placeholders at all on first search (empty list with only loading spinner indicating state)

@pringelmann
pringelmann force-pushed the feat/search-skeleton-loaders branch 2 times, most recently from ac8bc1e to 5b490fe Compare August 18, 2026 08:22
@pringelmann pringelmann added the 3. to review Waiting for reviews label Aug 18, 2026
@pringelmann
pringelmann marked this pull request as ready for review August 18, 2026 08:24
@pringelmann
pringelmann requested a review from a team as a code owner August 18, 2026 08:24
@pringelmann
pringelmann requested review from artonge, kra-mo, kristian-zendato, skjnldsv, sorbaugh and susnux and removed request for a team August 18, 2026 08:24
@pringelmann
pringelmann force-pushed the feat/search-skeleton-loaders branch from 5b490fe to 774f189 Compare August 18, 2026 09:02
@nextcloud-bot nextcloud-bot mentioned this pull request Aug 18, 2026

@artonge artonge left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments seem superfluous

Comment thread core/src/components/UnifiedSearch/UnifiedSearchModal.vue Outdated

@kra-mo kra-mo left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing! Works really really well :)

@kra-mo kra-mo left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess one tiny nit is that when there is only space for one result, only the header is shown, maybe some off by 1/greater-equals thing in the layouting?

Image

@pringelmann

Copy link
Copy Markdown
Contributor Author

Some comments seem superfluous

Shortened them and removed some

@pringelmann

Copy link
Copy Markdown
Contributor Author

I guess one tiny nit is that when there is only space for one result, only the header is shown, maybe some off by 1/greater-equals thing in the layouting?
Image

Fixed: there is now a minimum skeleton loader height

@pringelmann
pringelmann force-pushed the feat/search-skeleton-loaders branch from 7dc149c to eec32a8 Compare August 18, 2026 14:07
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
@pringelmann
pringelmann force-pushed the feat/search-skeleton-loaders branch from eec32a8 to 2b523a5 Compare August 19, 2026 06:29
@pringelmann
pringelmann merged commit 2a6ca8b into master Aug 19, 2026
232 of 235 checks passed
@pringelmann
pringelmann deleted the feat/search-skeleton-loaders branch August 19, 2026 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

3. to review Waiting for reviews design Design, UI, UX, etc. enhancement feature: search team: IDP Code maintained by 🪪 IDP team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants