create loading animation

[github-actions]

https://api.github.com/ToEzBit/bonn-noi/blob/cad6d63c483bd541bff6d4dc7802e2fd5e9a2286/src/features/post/component/PostList.tsx#L11

import isEmpty from "lodash/isEmpty";
import map from "lodash/map";

import { api } from "~/utils/api";
import PostItem from "./PostItem";

function PostList() {
  const { data: posts, isLoading: postLoading } = api.post.getAll.useQuery();

  if (postLoading) {
    // TODO: create loading animation
    // labels: good first issue
    return <p>loading ...</p>;
  }

  if (isEmpty(posts)) {
    return null;
  }

  return (
    <div className=" mt-4  w-2/6 p-4">
      <ul className="flex flex-col gap-4">
        {map(posts, ({ post, author }) => (
          <PostItem post={post} author={author} key={post.id} />
        ))}
      </ul>
    </div>
  );
}

export default PostList;

[mohibkay]

Hi there,
Please assign this issue to me. I would like to work on this.

[ToEzBit]

I appreciate your help 🥺

[mohibkay]

My pleasure. What kind of loader would you like me to use in the project?
Do we have a preference for the same?

[ToEzBit]

Design anything you like, without any worries

[mohibkay]

Sure, thank you.