Skip to content

Instantly share code, notes, and snippets.

@Olanetsoft
Created Apr 26, 2022
Embed
What would you like to do?
import React, { useState, useEffect } from "react";
import { Header } from "./components/Header";
import FeedList from "./components/FeedList";
import { Link } from "react-router-dom";
import { success, error, warn } from "./utilities/response";
import "react-toastify/dist/ReactToastify.css";
export default function Main() {
//...
// Create a state variable to store the feeds in the blockchain
const [feeds, setFeeds] = useState([]);
return (
<div className="w-full flex flex-row">
<div className="flex-1 flex flex-col">
<Header />
<div className="flex-1 flex flex-row flex-wrap">
{feeds.map((feed, index) => {
return (
<Link to={`/feed?id=${feed.id}`} key={index}>
<div className="w-80 h-80 m-2">
<FeedList feed={feed} />
</div>
</Link>
);
})}
{loading && (
<div className="flex-1 flex flex-row flex-wrap">
{Array(loadingArray)
.fill(0)
.map((_, index) => (
<div key={index} className="w-80">
<Loader />
</div>
))}
</div>
)}
</div>
</div>
</div>
);
}
const Loader = () => {
return (
<div className="flex flex-col m-5 animate-pulse">
<div className="w-full bg-gray-300 dark:bg-borderGray h-40 rounded-lg "></div>
<div className="w-50 mt-3 bg-gray-300 dark:bg-borderGray h-6 rounded-md "></div>
<div className="w-24 bg-gray-300 h-3 dark:bg-borderGray mt-3 rounded-md "></div>
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment