Nextjs Image component loading slow on map - javascript

When i use map the images render slow on localhost. However, when I dont use map it loads quickly.
I used a variety of props from Image component but none seem to fix this issue.
However, after all images rendered and I hit the refresh button they load fast.
This is quite confusing. Is there any way to load images quickly upon first page visit?
import React from 'react';
import Image from 'next/image';
import styles from './Peoples.module.scss';
export const Peoples = () => (
<>
{[...Array(10)].map((x, i) => (
<div className={styles.team_img_container} key={i}>
<Image
style={{ height: 100, width: 100 }}
src={`/people/${i + 1}.webp`}
alt="Picture of the author"
width={100}
height={100}
// unoptimized={true}
// loading="eager"
priority={true}
// quality={70}
/>
</div>
))}
</>
);
export default Peoples;

So I deployed this and left it as is It seems like during development mode all png or jpg will be converted to webp hence the slow reload. So deploy it and check out its performance on Vercel just dont use webp cause next will convert that 2 .

Related

Can't expand div horizontally with Native Base on React Native Web

I am trying to expand a div when I am testing for mobile sizes:
However, as you can see, it is completely in one tiny part of the screen. This isn't happening on larger, desktop sizes, just mobile sizes.
My layout looks like this:
import React from 'react'
import { Box, Row, Column, Container } from 'native-base'
import Header from 'app/components/header/Header'
import Footer from 'app/components/footer/Footer'
const Layout = (props: { children: any }) => {
return (
<Container w="100%" flexGrow={1}>
{props.children}
<Footer />
</Container>
)
}
I've tried using all sorts of elements, as seen above, currently I am using a <Container />
My <Footer /> looks like this:
const MainFooter = () => {
return (
<Column bg="#171717" py={50} px={[108, 90]} flexGrow={1} w="100%">
...
</Column>
)
}
The only way that I can get the full width is if I set it explicitly, but that isn't a great solution, because I want the width to be able to resize when a user expands or contracts the window.
What exactly needs to be done to expand the width more? I've been trying to find any potential solution and I can't find anything that ends up working.
This is on a NextJS site if that helps at all.
Probably was with my viewport. Adding this to the page header fixed the problem:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

React SVGR renders svg incorrectly

I'm trying to render 2 SVG files on my react app.
Here:
But when importing it as a component to React:
import { ReactComponent as ClosedEnvelope } from "../../close.svg";
import { ReactComponent as OpenEnvelope } from "../../open.svg";
const Envelope = ({closed) => {
return (
<div>
{closed ? <ClosedEnvelope /> : <OpenEnvelope />}
</div>
);
};
It renders the SVG incorrectly:
As you can see the "arrow" on the bottom left side is overflowing.
Seems like an issue with the method I used, because loading the SVG as an image, does work.
What may the problem be?
Thanks in advance
Here are the links to the SVG files:
Close envelope Github
Open envelope Github
Well, Apparently the 2 SVG files, had the same classes and IDs, which caused them to change a little.
If you have the same issue,
Change all the classes in one SVG file.
Change all IDs, also in the CSS like clip-path: URL(#SOME_ID)
This worked for me.

Is there a way to delay a spring until the image has loaded?

I'm using react-spring with the render-props API to set a background-size CSS property. The change is triggered whenever the background image changes. The thing is: the background image does not always load fast enough for the background size to change flawlessly.
Is there a way to delay the Spring until the background image is loaded, or do I have to preload all my background images beforehand?
There is a lot of background images that can be set to my object and they are quite large in size, so preloading them might take a lot of space in memory so it's not optimal in my case.
Here is my code:
<Spring native
from={{backgroundSize: "105%", backgroundImage: streamRectangleBackground}}
to={{backgroundSize: "101%", backgroundImage: streamRectangleBackground}}
reset={this.shouldResetAnimation(streamRectangleBackground)}>
{props =>
<animated.div className={"streamRectangle"} style={props}>
<Timer timerSetup={this.state.timerSetup}/>
</animated.div>
}
</Spring>
Thanks
I have an idea you might use here. For img components there is a onLoad event handler. If you display an image with the same src hidden somewhere on the page. Then you can set a state when the image is finally loaded.
Then use this state to change the to property of the Spring component. Something like this:
<img
style={{display: 'none'}}
src={streamRectangleBackground}
onLoad={() => this.setState({loaded: true})}
/>
<Spring native
from={{backgroundSize: "105%", backgroundImage: streamRectangleBackground}}
to={{backgroundSize: ${this.state.loaded ? "101%" : "105%"}}}
reset={this.shouldResetAnimation(streamRectangleBackground)}>
{props =>
<animated.div className={"streamRectangle"} style={props}>
<Timer timerSetup={this.state.timerSetup}/>
</animated.div>
}
</Spring>

Fade out and unmount a loading screen component with React-spring

I'm struggling with react-spring to fade out a loading screen and then unmount it.
The component unmounts but without animation and I can't figure why. I created a sandbox to illustrate:
https://codesandbox.io/s/nkxjxwo2xl
import React from 'react'
import ReactDOM from 'react-dom'
import { Transition } from 'react-spring'
class Loader extends React.PureComponent {
state = { loaded: false }
componentDidMount() {
setTimeout(() => {
this.setState({ loaded: true })
}, 1000)
}
render() {
const { percentage } = this.props
const styles = {
height: '100vh',
width: '100vw',
background: 'tomato'
}
return (
<Transition native from={{ opacity: 1 }} leave={{ opacity: 0 }}>
{!this.state.loaded &&
(style => (
<div style={Object.assign({}, styles, style)}>
<div>{Math.round(percentage)} %</div>
</div>
))}
</Transition>
)
}
}
ReactDOM.render(<Loader percentage={0} />, document.getElementById('root'))
There are no react-spring tags yet if anyone could create one, I think it would be helpful.
Yep, you fixed it yourself, the animated.div component was missing. I would recommend the use of it, though. Even if your view is small, it will still be rendered out 60 times per second by React otherwise (meaning it will go through all component phases 60 times + render). With native set it renders once and the animation will be applied in a requestAnimationFrame-loop directly in the dom (via instance.style.setProperty, it completely skips React - which makes a difference once your app gets bigger.
I found the solution if anyone finds this question.
Using the native attribute, you'll need to use animated.div (or any animated component) in order to have it animated. Or simply remove the native attribute. In my case, it is a loader which is not often displayed so I went for the easier way by simply removing the native attribute.
More info on the Spectrum react-spring community

react-google-maps does not work

I am building this weather application. Everything seems to work, but I cannot make google maps to work. I saw that API key is needed, I imported it. Then followed the documentation of react-google-maps while installing it in my project, but it still does not work, however, I have no errors in my console anymore.
Can you please look at it, what is wrong here? Feel free to clone it.
https://github.com/garstikaitis/weather-app/blob/master/src/components/google_map.js
http://arsti.net/weather-app/
For the specific app referenced in the question, I am able to see the map when I run the app locally. However, it is very, very narrow. This does not seem to be a react-google-maps issue but rather an HTML table layout issue in which the width of the map needs to be adjusted.
On another note, a common issue, if you don't see any map at all, could be due to setting the height of the map to "100%". You'd be asking for 100% of the height of the parent container, which could easily be a collapsed div of zero height, so you'd be essentially asking for 100% of nothing.
Here's an example using the #next version of react-google-maps (currently 7.0.0 as I write this) and React 15.6.1:
import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap } from "react-google-maps";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";
const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
<GoogleMap
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
/>
)));
ReactDOM.render(
<div style={{ height: '600px' }}>
<GettingStartedGoogleMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.28"
loadingElement={<div></div>}
containerElement={ <div style={{ height: `100%` }} /> }
mapElement={<div style={{ height: `100%` }} />}
/>
</div>,
document.getElementById('root')
);
If you removed the outer div's fixed height of 600px or replaced it with 100% the div would collapse and you wouldn't see the map at all. Hope this helps.

Categories