forked from Kieran/zap.stream
chore: progressive image POC
This commit is contained in:
parent
2fc28eb3fc
commit
b7338cb2fe
@ -41,6 +41,7 @@
|
||||
"react-intersection-observer": "^9.5.1",
|
||||
"react-intl": "^6.4.4",
|
||||
"react-markdown": "^8.0.7",
|
||||
"react-progressive-graceful-image": "^0.7.0",
|
||||
"react-router-dom": "^6.13.0",
|
||||
"react-tag-input-component": "^2.0.2",
|
||||
"semantic-sdp": "^3.26.3",
|
||||
|
@ -1,5 +1,6 @@
|
||||
import "./login-signup.css";
|
||||
import LoginHeader from "../login-start.png";
|
||||
import LoginHeaderSmall from "../login-start-small.png";
|
||||
import LoginVault from "../login-vault.png";
|
||||
import LoginProfile from "../login-profile.png";
|
||||
import LoginKey from "../login-key.png";
|
||||
@ -21,6 +22,7 @@ import { hexToBech32, openFile } from "utils";
|
||||
import { LoginType } from "login";
|
||||
import { DefaultProvider, StreamProviderInfo } from "providers";
|
||||
import { Nip103StreamProvider } from "providers/zsz";
|
||||
import ProgressiveImage from "react-progressive-graceful-image";
|
||||
|
||||
enum Stage {
|
||||
Login = 0,
|
||||
@ -147,7 +149,9 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
case Stage.Login: {
|
||||
return (
|
||||
<>
|
||||
<img src={LoginHeader} className="header-image" />
|
||||
<ProgressiveImage src={LoginHeader as string} placeholder={LoginHeaderSmall}>
|
||||
{(src) => <img src={src} className="header-image" />}
|
||||
</ProgressiveImage>
|
||||
<div className="content-inner">
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Create an Account" />
|
||||
|
BIN
src/login-start-small.png
Normal file
BIN
src/login-start-small.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
23
yarn.lock
23
yarn.lock
@ -2379,6 +2379,16 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@researchgate/react-intersection-observer@npm:^1.3.5":
|
||||
version: 1.3.5
|
||||
resolution: "@researchgate/react-intersection-observer@npm:1.3.5"
|
||||
peerDependencies:
|
||||
react: ^16.3.2
|
||||
react-dom: ^16.3.2
|
||||
checksum: b773ad4de12c58ffcb25ae2e5487dd0e2f5e0d944148695b9f90726cf9f847b757a1c7624586470ddb8eca2a9580fe9fd63edc2a9ee2cf0e4d6dad0c04eb81cd
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@rollup/plugin-babel@npm:^5.2.0":
|
||||
version: 5.3.1
|
||||
resolution: "@rollup/plugin-babel@npm:5.3.1"
|
||||
@ -8995,6 +9005,18 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-progressive-graceful-image@npm:^0.7.0":
|
||||
version: 0.7.0
|
||||
resolution: "react-progressive-graceful-image@npm:0.7.0"
|
||||
dependencies:
|
||||
"@researchgate/react-intersection-observer": ^1.3.5
|
||||
peerDependencies:
|
||||
react: ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
|
||||
react-dom: ^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
|
||||
checksum: fdec390b19c0d2d07129a89bb954936b7200a02bc7f6a2031db75d6a1805a1022d5425db13135d77f8d6ce53f7d64390a7b8cfa5be443bc9e027066572fe47af
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-remove-scroll-bar@npm:^2.3.3":
|
||||
version: 2.3.4
|
||||
resolution: "react-remove-scroll-bar@npm:2.3.4"
|
||||
@ -9981,6 +10003,7 @@ __metadata:
|
||||
react-intersection-observer: ^9.5.1
|
||||
react-intl: ^6.4.4
|
||||
react-markdown: ^8.0.7
|
||||
react-progressive-graceful-image: ^0.7.0
|
||||
react-router-dom: ^6.13.0
|
||||
react-tag-input-component: ^2.0.2
|
||||
semantic-sdp: ^3.26.3
|
||||
|
Loading…
Reference in New Issue
Block a user