mirror of
https://github.com/koodiklinikka/koodiklinikka.fi.git
synced 2026-01-26 03:14:08 +00:00
* 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
52 lines
1.0 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
}
|