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'
Related
I am new to react.js and JS in general.
I am looking for an example of code that:
uses react functions, not classes.
let the user upload an image using
then display that image on the screen
Thanks in advance.
First image should copy in to project path and import that into your page
import img from "../../assets/img/logo.svg";
render() {
return (
<div className="content" >
<img id="logo-img" src={img} alt="logo" />
</div>
)
}
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 I scroll down within the full page react's slides, though the page on the viewport of the screen the background color of the div does not change, I use react-on-screen npm package withing the full page react component but when I use the react-on-screen without full page react component it works great, I think when I scrolldown within the full-page-react slides the viewport don't think the new slides are new pages so the div background color doesn't change. Plus I tried to resize the window when the div in the last page is on the screen then the background is changed. Can you help me about this problem?
render() {
const { height } = this.state;
return (
<Layout>
<ReactFullpage
refresh
keyboardScrolling
lazyLoading
scrollOverflowReset={false}
slidesNavigation={deger}
onLeave={this.onLeave}
render={({ state, fullpageApi }) => {
return (
<ReactFullpage.Wrapper>
<React.Fragment>
<div className="section">
<p>Section 1</p>
</div>
<div className="section">
<div className="Index_LogoWrapper" style={{ height }}>
<LogoImage />
<div className="Index_ContactUsWrapper">
<div className="Index_ContactUs">
For more information contact us at
info#mail.io
</div>
</div>
</div>
</div>
<div className="section">
<TrackVisibility>
<ComponentToTrack />
</TrackVisibility>
</div>
</React.Fragment>
</ReactFullpage.Wrapper>
);
}}
/>
</Layout>
);
}
If the component you use to change the color relies on the scrolling position then you'll have to use the option scrollBar of fullPage.js in your react-fullpage component.
Otherwise I would encourage you to use the fullpage.js callbacks such as afterLoad or onLeave or even use the fullpage.js state classes that get added to the body element.
See one of my video tutorials about how to perform CSS 3 animations with fullpage.js state classes:
https://www.youtube.com/watch?v=qiCVPpI9l3M
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
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.