Problem/Motivation

Layout can shift as data is fetched from a menu endpoint. We should consider indicating some kind of loading state as data is fetched or otherwise address the flash of menu content following the API response.

Proposed resolution

* Add a loading state when fetching menu data.
* This loading state will not be used when menu tree data is provided directly.
* Consider making the use of a loading state configurable based on an attribute.

Remaining tasks

* Implement loading state.

Issue fork gdwc-3207892

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

brianperry created an issue. See original summary.

brianperry’s picture

brianperry
he/him
CreditAttribution: brianperry at Bounteous commented
Title: Add Loading State » Add Loading State / Address Flash of Menu Content
Issue summary: View changes
brianperry’s picture

brianperry
he/him
CreditAttribution: brianperry at Bounteous commented
Issue summary: View changes
joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
CreditAttribution: joegraduate at The University of Arizona commented
Assigned: Unassigned » joegraduate

Taking a look at this.

joegraduate opened merge request !11

joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
CreditAttribution: joegraduate at The University of Arizona commented
Status: Active » Needs review
brianperry’s picture

brianperry
he/him
CreditAttribution: brianperry at Bounteous commented
Status: Needs review » Needs work

@joegraduate Looking good - I was even able to test it using the tugboat preview :)

Just added a few comments on the MR - the biggest thing being making it possible to override the loading message.

joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
CreditAttribution: joegraduate at The University of Arizona commented

@brianperry, I've updated the MR with the changes you suggested. I wonder if we might actually be able to provide this functionality without the isLoading property if we were to use the until directive of lit-html.

joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
CreditAttribution: joegraduate at The University of Arizona commented
Status: Needs work » Needs review
brianperry’s picture

brianperry
he/him
CreditAttribution: brianperry at Bounteous commented

@joegraduate I wasn't aware of lit-html's `until` but that looks like it is tailor made for this case. I think it would be worth updating to use that if you're willing.

joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
CreditAttribution: joegraduate at The University of Arizona commented
Assigned: joegraduate » Unassigned

I took a crack at using the lit-html until directive but was unable to get anything working so far. We discussed this briefly in the 2021-04-15 Decoupled Menus contib event and @brianperry suggested that we could tackle that in a separate issue. At this point I think this issue is ready for review.

brianperry’s picture

brianperry
he/him
CreditAttribution: brianperry at Bounteous commented
Status: Needs review » Fixed

Merged. Thanks @joegraduate

joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
CreditAttribution: joegraduate at The University of Arizona commented

Follow-up task: #3209033: Replace loading state with lit-html until directive

brianperry’s picture

brianperry
he/him
CreditAttribution: brianperry at Bounteous commented
Status: Fixed » Closed (fixed)