Skip to content

Instantly share code, notes, and snippets.

Created April 26, 2022 09:48
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">
{, index) => {
return (
<Link to={`/feed?id=${}`} key={index}>
<div className="w-80 h-80 m-2">
<FeedList feed={feed} />
{loading && (
<div className="flex-1 flex flex-row flex-wrap">
.map((_, index) => (
<div key={index} className="w-80">
<Loader />
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment