Create Skeleton components #392

krysal · 2021-10-29T21:49:31Z

Fixes

Description

This PR creates the skeleton components for the search results view/tab, as modeled in Figma mockups. It adds a grid of squares for mixed results, a grid of rectangles of variable height for images results, and finally, a list of audio track skeletons for the audio results tab. There is also randomness in the length of smaller lines of the audio track skeleton, similar to the data expected.

It would be nice to add a subtle shimmer effect to these elements but I have to figure out how to do it.

Testing Instructions

Run storybook and compare the appearance of mentioned components with the mockups in Figma (links in the linked issue).

npm run storybook

Checklist

My pull request has a descriptive title (not a vague title like Update index.md).
My pull request targets the default branch of the repository (main) or a parent feature branch.
My commit messages follow best practices.
My code follows the established code style of the repository.
I added or updated tests for the changes I made (if applicable).
I added or updated documentation (if applicable).
I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

The text was updated successfully, but these errors were encountered:

zackkrida · 2021-11-04T20:35:21Z

Here's some css to get you started with a 'shimmer' effect. you'd have to change the colors to ours of course but it could be a good starting point.

.shimmering {
   animation : shimmer 2s infinite linear;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 1000px 100%;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

These look great! I think it might be helpful if there was like a <VBone> 🦴 component that:

contained the shimmer code, toggle-able by a prop (default it to enabled)
set bg-dark-charcoal-10 so we don't have to repeat it in so many places

@WordPress/openverse-frontend might have other ideas for what things could be props on that component. Great work!

sarayourfriend

LGTM aside from the screen reader issue I pointed out.

sarayourfriend · 2021-11-09T13:28:18Z

src/components/Skeleton/AudioTrackSkeleton.vue

+    <div
+      class="flex-shrink-0 h-20 w-20 mr-4 bg-dark-charcoal-10 rounded shimmering"
+    >
+      &nbsp;


Is the space necessary to accomplish this? I tested this in VoiceOver with Safari and while the element is not tabbable of course, if you use arrow key navigation (which is common for reading through paragraphs) VoiceOver will read "space" for each of the skeleton elements becasue of this single space.

Thanks for reminding me about this, @sarayourfriend. I used the non-breaking space entity to avoid lint errors about empty elements, but later I changed to auto closed divs for fewer characters, but non-void void HTML elements –as divs– technically are not valid in HTML5 (tested with W3C HTML validator), only allowed in XHTML syntax so I was wondering if this could be a bad practice 🤔

I deleted the entities but an alternative could be to disable that rule in these files.

Even if you render a "void" looking div element in Vue, it knows that div's can't be void, so it will automatically render an opening and closing tag for it. You can see this in this codesandbox: https://codesandbox.io/s/keen-fermi-jv1y7?file=/src/App.vue

Inspect the elements or look at the console output to see how the <div class="testing" /> gets expanded out to <div class="testing"></div> during rendering.

So we should be able to avoid the linter complaining about empty elements by just rendering a "void" style div tag and letting Vue expand it out for us (unless the linter still complains about that, in which case we can just disable it for that line I guess).

I also wondered if this is something Vue does under the hood or just the browser autocompleting tags, as this example fails the W3C validator test, but opening in a browser shows the closing tag.

<!DOCTYPE xhtml> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="myvoiddiv" /> </body> </html>

Anyway, it's just a curiosity that I had. As you said this way works so I'll merge it. Thank you!

krysal · 2021-11-09T15:37:25Z

@zackkrida Thank you for your suggestion, that animation looks great! At least in my view 😄 I think @panchovm might want to take a look at it too. Here is a sample video, though you can watch it live now of course

CleanShot.2021-11-08.at.18.02.20.mp4

panchovm · 2021-11-10T13:21:01Z

It looks great. I think it is crucial to see it live, with real results. I was also considering a pulsing effect instead. Here is a post about it and worth going back to this once we have the public version.

Great work

zackkrida · 2021-11-10T16:08:53Z

Oooh, the pulse is nice too @panchovm

* main: Replace PDM logo (#411) Add playwright e2e tests (#394) Update breakpoints to the new Tailwind config (#408) Create a global audio player (amongst many smaller improvements) (#399) Create Skeleton components (#392) Tailwind breakpoints (#403) Avoid error using only local translation files (#367) Add base Button component (#372) Use Tailwind RTL styles everywhere (#355) Add a dependencies section and remove the redundant title (#379) 🔄 Synced file(s) with WordPress/openverse (#384) Fix filters not being set on SSR (#386)

dhruvkb added this to In progress in Openverse PRs Oct 29, 2021

krysal added 🌟 goal: addition 🕹 aspect: interface labels Oct 29, 2021

krysal changed the title ~~Skeletons~~ Create Skeleton components Oct 29, 2021

krysal added 2 commits Nov 2, 2021

Add color to Tailwind: Dark Charcoal 10%

5a3b50c

Add base square skeleton grid

0b97424

krysal force-pushed the skeletons branch from 7b0cea1 to 0b97424 Nov 2, 2021

krysal added 5 commits Nov 3, 2021

Add masonry grid skeleton for images

cf60ad6

Create AudioTrackSkeleton component

62f7338

Add rounded corners to AudioTrackSkeleton

feb0c4c

Refactor GridSkeleton.vue

0efec3f

📝 Add story for Skeleton components

44ee844

krysal marked this pull request as ready for review Nov 4, 2021

krysal requested a review from as a code owner Nov 4, 2021

krysal requested review from zackkrida (assigned from WordPress/openverse-frontend) and obulat (assigned from WordPress/openverse-frontend) Nov 4, 2021

dhruvkb moved this from In progress to Needs review in Openverse PRs Nov 4, 2021

krysal added 3 commits Nov 8, 2021

Add VBone component with shimmer animation

5ceb928

Add shimmer animation to AudioTrackSkeleton

d0c7570

Merge branch 'main' into skeletons

2ccec93

sarayourfriend approved these changes Nov 9, 2021

View changes

Remove non-breaking space entities left in skeletons

d8376c1

zackkrida approved these changes Nov 9, 2021

View changes

Openverse PRs automation moved this from Needs review to Reviewer approved Nov 9, 2021

krysal merged commit 51e0771 into main Nov 9, 2021
3 checks passed

Loading

krysal deleted the skeletons branch Nov 9, 2021

Openverse PRs automation moved this from Reviewer approved to Merged! Nov 9, 2021

WordPress / openverse-frontend Public

Create Skeleton components #392

Create Skeleton components #392

krysal commented Oct 29, 2021 •

edited

Loading

zackkrida commented Nov 4, 2021

sarayourfriend left a comment

sarayourfriend Nov 9, 2021

krysal Nov 9, 2021 •

edited

Loading

sarayourfriend Nov 9, 2021

krysal Nov 9, 2021

krysal commented Nov 9, 2021

panchovm commented Nov 10, 2021

zackkrida commented Nov 10, 2021

WordPress / openverse-frontend Public

Create Skeleton components #392

Create Skeleton components #392

Conversation

krysal commented Oct 29, 2021 • edited Loading

Fixes

Description

Testing Instructions

Checklist

Developer Certificate of Origin

zackkrida commented Nov 4, 2021

sarayourfriend left a comment

sarayourfriend Nov 9, 2021

Choose a reason for hiding this comment

krysal Nov 9, 2021 • edited Loading

Choose a reason for hiding this comment

sarayourfriend Nov 9, 2021

Choose a reason for hiding this comment

krysal Nov 9, 2021

Choose a reason for hiding this comment

krysal commented Nov 9, 2021

panchovm commented Nov 10, 2021

zackkrida commented Nov 10, 2021

krysal commented Oct 29, 2021 •

edited

Loading

krysal Nov 9, 2021 •

edited

Loading