Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Skeleton To All loading pages #1309

Merged
merged 2 commits into from
Aug 3, 2024
Merged

Added Skeleton To All loading pages #1309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fbb0671
Added Skeleton
Ayushmaanagarwal1211 Aug 3, 2024
a9773af
Fixed bug
Ayushmaanagarwal1211 Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 56 additions & 13 deletions website3.0/components/blogpage/BlogPost.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import {
faBookmark as regularBookmark,

} from "@fortawesome/free-regular-svg-icons";

import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { Tooltip } from 'react-tooltip'

import { FaTrashCan,FaShare,FaLink,FaArrowUpFromBracket, FaHandsClapping, FaEllipsisVertical, FaEllipsis} from "react-icons/fa6";
Expand Down Expand Up @@ -998,32 +1001,35 @@ data-tooltip-content="Reaction"
theme ? "bg-white text-black " : " bg-[#0f0e0e] text-white "
} transition-colors duration-500 w-[55%] shadow-lg rounded-lg max-lg:w-full max-lg:order-1`}
>
<img
{loading?<Skeleton height={"30%"} width={"100%"} />: <img
src={blog.image}
alt={blog.title}
onError={handleError}
id="image-section"
className="w-full h-96 object-cover mb-5 rounded-lg max-md:mt-[30px] max-md:p-[8px]"
/>
/>}
<div className="px-10 max-[425px]:px-8">
<div
className="flex items-center mb-5 cursor-pointer"

>
{
loading? <Skeleton borderRadius={100} height={40} width={40} />:
<img onClick={handleOpenProfile}

src={
fetchedUser
? fetchedUser.image1
: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR81iX4Mo49Z3oCPSx-GtgiMAkdDop2uVmVvw&s"
}
alt={fetchedUser?fetchedUser.name:"User Image"}
className="w-10 h-10 rounded-full mr-3"
/>
/>}
<div onClick={handleOpenProfile}>
<div className="text-base font-bold">{blog.authorName}</div>
<div className="text-base font-bold">{loading? <Skeleton height={10} width={200} />:blog.authorName}</div>
<div className="text-gray-500 text-xs">
Posted on{" "}
{new Date(blog.date).toLocaleDateString("en-US", {
{loading? <Skeleton height={10} width={200} />: new Date(blog.date).toLocaleDateString("en-US", {
month: "long",
day: "numeric",
})}
Expand Down Expand Up @@ -1057,10 +1063,41 @@ data-tooltip-content="Reaction"
</span>
</div>
</div>
<h1 className="text-4xl max-md:text-3xl max-[425px]:text-2xl font-normal mb-5" dangerouslySetInnerHTML={{ __html: blog.title}}></h1>
<div className="text-gray-600 mb-5">{blog.introduction}</div>
{
loading? <Skeleton height={10} width={400} />:
<h1 className="text-4xl max-md:text-3xl max-[425px]:text-2xl font-normal mb-5" dangerouslySetInnerHTML={{ __html: blog.title}}></h1>}
{loading? <div className="flex flex-col gap-1"><Skeleton height={10} width={400} />
</div>:<div className="text-gray-600 mb-5">{blog.introduction}</div>}
<div className="mb-5">
{blog.sections?.map((section, index) => (
{
loading? blog.sections?.map((section, index) => (
<div key={index} className="mb-5">
<h2 className="text-2xl max-[425px]:text-xl font-semibold mb-3">
<Skeleton height={10} width={100} />

</h2>

<p className="text-gray-600 mb-3"> <Skeleton height={10} width={100} />
<Skeleton height={10} width={200} />
<Skeleton height={10} width={300} />
<Skeleton height={10} width={400} />
<Skeleton height={10} width={500} />

</p>

<div key={subIndex} className="ml-5 mb-3">
<h3 className="text-xl font-semibold mb-2">
<Skeleton height={10} width={100} />

</h3>
<p className="text-gray-600"> <Skeleton height={10} width={200} />
</p>
</div>


</div>
)):
blog.sections?.map((section, index) => (
<div key={index} className="mb-5">
<h2 className="text-2xl max-[425px]:text-xl font-semibold mb-3">
{section.heading}
Expand Down Expand Up @@ -1099,7 +1136,13 @@ data-tooltip-content="Reaction"
{blog.tags && blog.tags.map(data=>{
return <div className="text-[14px] max-sm:text-[13px] max-[425px]:text-[12px]">{"#"+data}</div>})}
</div>
<div className="pb-10 " dangerouslySetInnerHTML={{ __html: blog.description }}></div>
{loading? <div className="flex flex-col gap-1"><Skeleton height={10} width={250} />
<Skeleton height={10} width={300} />
<Skeleton height={10} width={350} />
<Skeleton height={10} width={400} />
<Skeleton height={10} width={450} />
<Skeleton height={10} width={500} />
</div>: <div className="pb-10 " dangerouslySetInnerHTML={{ __html: blog.description }}></div>}
<hr className="w-full h-1 pb-5" />
<div className="text-2xl font-bold pb-5 max-[425px]:text-xl" id="comment">Top Comments</div>
<div className="flex items-center justify-center mb-4 max-[425px]:mb-2">
Expand Down Expand Up @@ -1217,17 +1260,17 @@ data-tooltip-content="Reaction"
{/* <img src="/banner.png" alt="" /> */}
<div className="w-full h-10"></div>
<div className="flex px-5 cursor-pointer" onClick={handleOpenProfile}>
<img
{loading?<Skeleton height={40} width={40} borderRadius={100}/>: <img
src={
fetchedUser
? fetchedUser.image1
: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR81iX4Mo49Z3oCPSx-GtgiMAkdDop2uVmVvw&s"
}
alt={fetchedUser?fetchedUser.name:"User Image"}
className="w-12 h-12 rounded-full mr-3 relative -top-3"
/>
<div className="py-1">
<div className="text-xl font-bold">{blog.authorName}</div>
/>}
<div className="py-1 ml-3">
<div className="text-xl font-bold">{loading?<Skeleton height={10} width={200} />:blog.authorName}</div>
</div>
</div>
<div className="w-full px-4">
Expand Down
86 changes: 74 additions & 12 deletions website3.0/components/forumpage/ForumPost.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import React, { useEffect, useRef, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import Image from 'next/image';

import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import {
faCalendar,
faCheck,
Expand Down Expand Up @@ -76,6 +79,8 @@ function ForumPost({theme,id,finalUser,setMsg,setIsPopup}) {
let [isRelated,setIsRelated]=useState(false)
let [relatedUsers,setRelatedUsers]=useState([])
let comment=useRef()
let [loading,setLoading]=useState(true)

const [hoveredUser, setHoveredUser] = useState(null);
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
let [users,setUsers]=useState([])
Expand Down Expand Up @@ -105,6 +110,7 @@ function ForumPost({theme,id,finalUser,setMsg,setIsPopup}) {
console.log(data)
setIssue(data.data)
setRelatedUsers(data.data.questionrelatedusers)
setLoading(false)
}
async function handleCloseQuestion(){
let ques=await fetch("/api/closequestion",{
Expand Down Expand Up @@ -352,13 +358,15 @@ function ForumPost({theme,id,finalUser,setMsg,setIsPopup}) {
<div className="w-[75%] min-w-[800px] max-xl:min-w-[99%] max-md:w-[99%]">
<div className="flex w-full justify-between max-md:flex-wrap">
<div className="flex gap-5 cursor-pointer" onClick={()=>handleOpenProfile(issue.authorId)}>
<img
{loading? <Skeleton height={60} width={60} borderRadius={100} />
: <img
src={issue.authorImage}
alt="User"
className="w-12 h-12 rounded-full"
/>
/>}
<div className="text-lg">
<div className={`${theme?"":"text-white"}`}>{issue.authorName}</div>
<div className={`${theme?"":"text-white"}`}>{loading? <Skeleton height={10} width={200} />:
issue.authorName}</div>
<div className="flex gap-5 text-sm text-gray-500">
<div className={`flex gap-1 mt-1 items-center ${theme?"":"text-[#767677]"}`}>
<svg version="1.1" viewBox="0 0 2048 2048" width="19" height="19" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -391,10 +399,10 @@ function ForumPost({theme,id,finalUser,setMsg,setIsPopup}) {
<path transform="translate(1359,188)" d="m0 0h2l-1 3h-2l-2 4-5 7-1-3z" fill="#6b7280"/>
<path transform="translate(1392,173)" d="m0 0 11 1 5 2-2 1-13-2z" fill="#6b7280"/>
</svg>
Question Owner
{loading? <Skeleton height={10} width={100} />:"Question Owner"}
</div>
<div className={ `mt-1 ${theme?"":"text-[#767677]"}`}>
<FontAwesomeIcon icon={faCalendar} /> {formatDate(issue.createdAt)}
<FontAwesomeIcon icon={faCalendar} /> {loading? <Skeleton height={10} width={100} />:formatDate(issue.createdAt)}
</div>
</div>
</div>
Expand All @@ -410,10 +418,12 @@ Question Owner
<div className="mt-2 w-[90%]">
<div className={`${theme ? "" : "text-white"} text-3xl max-md:flex font-bold`}>
<span className="text-4xl hidden max-md:block font-bold w-[100px]">Q :</span>
{
loading? <Skeleton height={30} width={400} />:
<div
className="break-words" // Ensure long words wrap to the next line
dangerouslySetInnerHTML={{ __html: issue?.title }}
/>
/>}
</div>

{hoveredUser && (
Expand All @@ -438,10 +448,20 @@ Question Owner
</div>
</label>
)}
<div className="mt-[30px] flex gap-3">{issue.tags?.map((data)=><span className="bg-gray-200 px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200">{data}</span>)}</div>
<div className="mt-[30px] flex gap-3">{issue.tags?.map((data)=>data.length>0&&<span className="bg-gray-200 px-4 py-1 text-gray-700 cursor-pointer hover:bg-[#deecf5] hover:text-[#6089a4] transition-all duration-200">{data}</span>)}</div>

<div className={`${theme?"":"text-gray-300"} max-md:pl-[64px] text-base mt-5 text-justify`} dangerouslySetInnerHTML={{__html:issue?.content}}/>

{
loading? <div className="flex flex-col gap-1">
<Skeleton height={10} width={200} />
<Skeleton height={10} width={300} />
<Skeleton height={10} width={400} />
<Skeleton height={10} width={500} />
<Skeleton height={10} width={600} />
<Skeleton height={10} width={700} />

</div>:
<div className={`${theme?"":"text-gray-300"} max-md:pl-[64px] text-base mt-5 text-justify`} dangerouslySetInnerHTML={{__html:issue?.content}}/>
}

<div className="mt-10 flex gap-2 text-gray-500 items-center">
<FontAwesomeIcon icon={faTags} />
Expand All @@ -461,7 +481,11 @@ Question Owner
{
issue?.questionrelatedusers?.length>4?<span>+{issue?.questionrelatedusers?.length-4}</span>:<span></span>
}
{issue?.questionrelatedusers?.slice(0,issue?.questionrelatedusers.length>4?4:issue?.questionrelatedusers.length).map((user, idx) => {
{
loading? <Skeleton height={10} width={200} />
:

issue?.questionrelatedusers?.slice(0,issue?.questionrelatedusers.length>4?4:issue?.questionrelatedusers.length).map((user, idx) => {
return <img
key={idx}
onClick={()=>router.push(`/profile?id=${user.authorId}`)}
Expand Down Expand Up @@ -489,7 +513,45 @@ Question Owner
{
issue?.solutions && <div className="text-xl mt-[20px]">{issue.solutions.length} Answers</div>
}
{ issue?.solutions?.map((data,index)=>{
{
loading? <div className="mt-10">
<div className={`min-h-20 w-full ${theme?"bg-[#eeeeee]":"bg-[#383838] rounded-md "} p-8`}>
<div className="flex w-full justify-between flex-wrap">
<div className="flex gap-5 cursor-pointer" >
<Skeleton baseColor="white" height={50} width={50} borderRadius={100} />
<div className="text-lg">
<div className={`${theme?"":"text-white"}`}>{ <Skeleton height={10} width={200} />}</div>
<div className="flex gap-5 text-sm text-gray-500">
<div className={`${theme?"":"text-gray-300"}`}>
<FontAwesomeIcon icon={faCoffee} /> Solution Provider
</div>
<div className={`${theme?"":"text-gray-300"}`}>
<Skeleton baseColor="white" height={10} width={100} />


</div>
</div>
</div>
</div>

</div>
<div className="mt-10 flex text-gray-600 gap-4">
<div className={`${theme?"":"text-white"} text-5xl font-bold`}>A:</div>

<div className="flex flex-col gap-1">

<Skeleton height={10} width={100} baseColor="white"/>
<Skeleton baseColor="white" height={10} width={200} />
<Skeleton baseColor="white" height={10} width={300} />
<Skeleton baseColor="white" height={10} width={400} />
<Skeleton baseColor="white" height={10} width={500} /> </div>

</div>
</div>
</div>
:

issue?.solutions?.map((data,index)=>{

return <div className="mt-10">
<div className={`min-h-20 w-full ${theme?"bg-[#eeeeee]":"bg-[#383838] rounded-md "} p-8`}>
Expand Down
Loading
Loading