We Keep Coding

Loading Skeleton implementation in NextJS / React

I'm fetching a set of video links from an Amazon S3 bucket, and mapping them into a video player component called HoverVideoPlayer:
{data?.slice(0, 10).map((item: any) => (
<div key={item.id}>
{data ? (
<HoverVideoPlayer videoSrc={item.videoLink} />
) : (
<Skeleton count={10} />
)}
</div>
))}
This leads to a loading experience in which multiple images /videos are scaling up inside a Tailwind grid component until they are fully loaded, distorting the layout:
In order to improve this loading into something more refined as used at YouTube , I have implemented 'React Loading Skeleton' in an effort to have a fixed sized preloader that takes up the space of the grid column, until the video is fully loaded and scaled preventing layout jumps.
This is my 10th+ attempt to implement the Loading Skeleton and getting it to display during the loading / scale up time. I have adjusted the height and width of the Skeleton, put the component over and under the player, adjusted the import to the precise data fetch location:
<HoverVideoPlayer
videoSrc={item.videoLink || <Skeleton count={10} />}
/>
but no success, not even the slightest appearance of a Loading Skeleton. What am I doing wrong?
https://codesandbox.io/p/sandbox/happy-antonelli-dt1enq?file=%2Fpages%2Findex.tsx

From what I understand you want the skeleton to show while the data is fetching ?
I think something like this should work :
<main className={styles.main}>
{!data?.length && new Array(10).fill().map(() => <Skeleton count={10} />)}}
{data?.slice(0, 10).map((item: any) => (
<div key={item.id}>
<HoverVideoPlayer videoSrc={item.videoLink} />
</div>
))}
</main>
And don't forget to import the styles for skeleton :
import 'react-loading-skeleton/dist/skeleton.css'

react-scroll navigate and scroll to anchor from any page

I'm using react-scroll to scroll from the Nav to any preset anchor element.
I chose it because it also provides an active class to the Nav items when element is in viewport.
This exmple works if i'm on the HomePage. But if i click the navbar item from another page it doesn't work.
I need to make the scrolling work from another page as well.
Need to mention that all the Anchor Elements are on the HomePage and using create-react-app with v5 router.
CODESANDBOX example
Github issue link
PS: If you know any better library that can do this and add active class please post it here.
import { Element} from 'react-scroll';
export function HomePage() {
return (
<>
<title>Home</title>
<Banner />
<Element name="price-plan-list">
<PriceplanList />
</Element>
<Element name="entertainment-area">
<EntertainmentArea />
</Element>
</>
);
}
And this is the NavbarItem:
import { Link as AnchorLink } from 'react-scroll';
<NavItem key={index}>
<AnchorLink
activeClass="active"
to={item.link}
spy={true}
hashSpy={true}
duration={1000}
>
{item.title}
</AnchorLink>
</NavItem>

Dynamic Pages Don't Change Rendered Components But URL Changes When Clicking Back Button, Using Link

I've been having an issue when creating a blog using Next.js and was hoping someone may be able to point me in the right direction as I am relatively new to Next.js.
I'm trying to pull documents from my database on Google Firestore, each one being a different blog post. I am trying to avoid creating individual pages for each blog post and have created a dynamic page, [url].js, that each of the post uses to render.
Anyway my issue comes when I go to a blog post, refresh on that blog post, and then try to hit the back button. The URL will change but the rendered components on the screen do not. So rather than going back to the page with the list of all the blogs, it stays on the current blog post but the url changes to the list of all the blogs.
For example:
If im on localhost:3000/blog/test-page then refresh the page and hit back, the url changes to localhost:3000/blog but test-page is still showing its contents.
Would anyone be able to help me figure out the best possible way to fix this issue? Thanks
[url].js
const Post = props => (
<Layout
template={"blog"}
>
<div className="container">
<div className="default-content page-styles">
<h2 className="title title-small"><span>{props.blogPost.title}</span></h2>
{props.blogPost.body.map(block => Components(block))}
</div>
</div>
</Layout>
);
Blog.js
const Blog = (props) => (
<Layout>
<HeroBanner
title={title}
desktopImage={desktopImage}
mobileImage={mobileImage}
mobileImageSmall={mobileImageSmall}
padding="120px 0px 150px 0px"/>
<section className="default spaced-page">
<div className="container">
<div className="default-content" >
<div className="the-post-section">
{props.blogPost.map(post => (
<div key = {post.id} className="the-post page-styles">
<img src={post.image} style={{ height: 180 + "px", width: 310 + "px"}}/>
<Link href="/blog/[url]" as={`/blog/${post.url}`}>
<h4><a>{post.title}</a></h4>
</Link>
<div className="clear"></div>
</div>
))}
</div>
</div>
</div>
</section>
</Layout>
);

I found a solution that works but not sure if it's the "best practice".
All I had to do was change the Link component from
<Link href="/blog/[url]" as={`/blog/${post.url}`}>
<h4><a>{post.title}</a></h4>
</Link>
Remove the h4 tags and change href= into to=
<Link to="/blog/[url]" as={`/blog/${post.url}`}>
<a>{post.title}</a>
</Link>
Edit: Turns out this actually throws errors in the console, so I may have to find a different way.
Here are the errors.
Warning: Failed prop type: The prop href is marked as required in Link, but its value is undefined.
Link: unknown props found: to
Uncaught TypeError: Parameter 'url' must be a string, not undefined

When using the a tag or Link from react router dom, Image keeps downloading

I'm using react router 4 and trying to link to an image on my page. When I click the link, the image just downloads instead of opening in a new tab or on the same page. Ideally I'd it to open the image on the same page in the browser.
I'm using prismic which is a headless cms to host the content images so I don't believe i have access to the content header to change it. Is there any way I can force this behavior through react or react-router?
render(){
return (
<Wrapper>
{landscapeList.map((value, index) => (
<Link key={index} to={value.src} target="_blank">
<img key={index} src={value.src} />
</Link>
))}
</Wrapper>
);
}
The target blank seems to open a new browser for a moment but then just downloads the image again.
Anyone have any ideas on this one?

Take out the “_blank” attribute

Wrapping react-leaflet Map componet in <div> tag makes it disappear

I am attempting to add a sibling <DeviceControls/> component alongside my <MapContainer/> component. But when when I do so the OpenStreetMap / Leaflet map disappears from the DOM and all that shows on the page is the contents of the <DeviceControls/>component.
This is especially confusing as I appear to be doing the same thing as the offfical examples from PaulLeCam/react-leaflet (https://github.com/blob/70cd9f32bb6461df65b0d07b9810d5e9ddf459ad/example/components/index.js)
const examples = (
<div>
<h1>React-Leaflet examples</h1>
<h2>Popup with Marker</h2>
<SimpleExample />
<h2>Events</h2>
<p>Click the map to show a marker at your detected location</p>
...
<EventsExample />
<h2>WMS tile layer</h2>
<WMSTileLayerExample />
</div>
)
Where there are many React components alongside many Map components and they all display on the page fine.
Can anyone see why it doesn't work when I try this same thing? ie why does wrapping my <MapContainer/> in a <div> make the <MapCOntainer/> component seem to disappear in my code but not the official example code?
render() {
return (
<div>
<MapContainer />
<DeviceControls />
</div>
);
}

The was happening because the <div> wrapping the <MapContainer />
<DeviceControls /> needs a height set on it. Changing it to <div style={{ height: '100%'> solves this problem.