Files
koodiklinikka.fi/components/Members.tsx
Olavi Haapala ca5b251c7c Fix some performance issues
* Remove render blocking stripe JS that seems unnecessary
* Use native lazy loading of images
  - Truly a progressive enhancement, only affects browsers that support it
  - Causes a warning: [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323, which can not be easily fixed
* Render content first, hydrate after that
2020-09-22 21:46:25 +03:00

52 lines
1.0 KiB
TypeScript

import React from "react";
import request from "axios";
import shuffle from "lodash/shuffle";
import api from "./api";
export default class Members extends React.Component {
state = {
members: [],
};
componentDidMount() {
this.refreshMembers();
}
async refreshMembers() {
const res = await request.get(api("members"));
this.setState({
members: shuffle(res.data),
});
}
render() {
const members = this.state.members.map((member) => {
const src = `${member.avatar_url}&s=120`;
return (
<img
className="member"
key={member.avatar_url}
src={src}
alt=""
width={30}
height={30}
loading="lazy"
/>
);
});
return (
<div className="members" aria-hidden="true">
<a
href="https://github.com/koodiklinikka"
target="_blank"
rel="noopener noreferrer"
tabIndex={-1}
>
{members}
</a>
</div>
);
}
}