Component: VShowResults button

[obulat]

All work for the 'Create new header' milestone should be done under the new_header feature flag.

Description

The mobile content settings modal shows a "Show results" button which, when clicked, closes the modal. The button also shows an animation when the results are being fetched.

API

Props

Name	Type	Description
isFetching	boolean	Whether the media is being fetched. If true, the dots animation is shown instead of the label

Events

Name	Associated data	Description
click	-	click event is sent to the parent to close the modal.

Code samples

<VButton>
  <span v-if="isFetching">
    ...loading animation svg
  </span>
  <span v-else>
    {{ $t('show-results') }}
  </span>
</VButton>

Dependencies

References

The animation can probably be based on the animation of the VLogoButton.

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

Implementation

• 🙋 I would be interested in implementing this component.

[obulat]

Note that the stub of the button without animation is implemented in #1846