Component: Header Logo (VLogoLoader)

[zackkrida]

Component: VLogoLoader

Description

The VLogoLoader is a component that displays the Openverse logo but also acts as a global loader to indicate that results aren't ready. In the header this component will be wrapped in a <NuxtLink /> so that it also serves as a link to the homepage.

Initially this component can be very simple, but I am exploring the usability of making it use aria-busy¹ to announce the loading state. We'd have to make the results area an live region so we need to explore that more.

A good writeup of live regions can be found here: https://www.smashingmagazine.com/2015/04/its-alive-apps-that-feed-back-accessibly/

API

Props

Name	Type	Description
state	string enum IDLE|LOADING	The current state of the component, used to show the loading state

It might make sense to make the hover state a prop at some point but I don't think it's necessary yet.

Code samples

Usage:

<NuxtLink to="/">
  <VLogoLoader :state="isFetchingMedia ? LOADING : IDLE" />
</NuxtLink>

References

• Figma: https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=558%3A2279

Implementation

• 🙋 I would be interested in implementing this component.

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy ↩

[zackkrida]

It turned out that live region support wasn't appropriate for this component. I'll link to the new live region ticket for the searchgrid when it is ready.