open-sauced / hot

πŸ•The site that recommends the hottest projects on GitHub.
https://hot.opensauced.pizza
MIT License
426 stars 148 forks source link

Feature: Loading skeleton in Hero #297

Closed NsdHSO closed 2 years ago

NsdHSO commented 2 years ago

Type of feature

πŸ• Feature

Current behavior

If you search in the search box after one repo, we receive responses 1-2 seconds. I think we should display a skeleton

Suggested solution

     if (isLoading) {
    return (
      <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
       // Hint Array.from(Array(5)) || props count = {1,2,3....}
        <Skeleton
          enableAnimation
          count={1}
        />
      </div>
    );
  }

Additional context

issue: fix #297

PR:

296

No response

Code of Conduct

Contributing Docs

bdougie commented 2 years ago

not technically a good first issue since it is blocked by another PR. All Good First Issues should have clear solutions.

OgDev-01 commented 2 years ago

.take

github-actions[bot] commented 2 years ago

Thanks for taking this on! If you have not already, join the conversation in our Discord

OgDev-01 commented 2 years ago

I'm thinking about making the hero card a separate reusable component, to stay organized... @bdougie what do u think about that?

NsdHSO commented 2 years ago

Yes, good remarks, but you don't have this to do with this issue. See here, we get the answer after 1-2 seconds. image

bdougie commented 2 years ago

Closing this for now. however, we do need a skeleton for RepoWrap instead. I will open that issue.