forked from Kieran/zap.stream
chore: progressive image POC
This commit is contained in:
parent
3dd105c13b
commit
507b0b94bf
@ -41,6 +41,7 @@
|
|||||||
"react-intersection-observer": "^9.5.1",
|
"react-intersection-observer": "^9.5.1",
|
||||||
"react-intl": "^6.4.4",
|
"react-intl": "^6.4.4",
|
||||||
"react-markdown": "^8.0.7",
|
"react-markdown": "^8.0.7",
|
||||||
|
"react-progressive-graceful-image": "^0.7.0",
|
||||||
"react-router-dom": "^6.13.0",
|
"react-router-dom": "^6.13.0",
|
||||||
"react-tag-input-component": "^2.0.2",
|
"react-tag-input-component": "^2.0.2",
|
||||||
"semantic-sdp": "^3.26.3",
|
"semantic-sdp": "^3.26.3",
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import "./login-signup.css";
|
import "./login-signup.css";
|
||||||
import LoginHeader from "../login-start.png";
|
import LoginHeader from "../login-start.png";
|
||||||
|
import LoginHeaderSmall from "../login-start-small.png";
|
||||||
import LoginVault from "../login-vault.png";
|
import LoginVault from "../login-vault.png";
|
||||||
import LoginProfile from "../login-profile.png";
|
import LoginProfile from "../login-profile.png";
|
||||||
import LoginKey from "../login-key.png";
|
import LoginKey from "../login-key.png";
|
||||||
@ -21,6 +22,7 @@ import { hexToBech32, openFile } from "utils";
|
|||||||
import { LoginType } from "login";
|
import { LoginType } from "login";
|
||||||
import { DefaultProvider, StreamProviderInfo } from "providers";
|
import { DefaultProvider, StreamProviderInfo } from "providers";
|
||||||
import { Nip103StreamProvider } from "providers/zsz";
|
import { Nip103StreamProvider } from "providers/zsz";
|
||||||
|
import ProgressiveImage from "react-progressive-graceful-image";
|
||||||
|
|
||||||
enum Stage {
|
enum Stage {
|
||||||
Login = 0,
|
Login = 0,
|
||||||
@ -147,7 +149,9 @@ export function LoginSignup({ close }: { close: () => void }) {
|
|||||||
case Stage.Login: {
|
case Stage.Login: {
|
||||||
return (
|
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">
|
<div className="content-inner">
|
||||||
<h2>
|
<h2>
|
||||||
<FormattedMessage defaultMessage="Create an Account" />
|
<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
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"@rollup/plugin-babel@npm:^5.2.0":
|
||||||
version: 5.3.1
|
version: 5.3.1
|
||||||
resolution: "@rollup/plugin-babel@npm:5.3.1"
|
resolution: "@rollup/plugin-babel@npm:5.3.1"
|
||||||
@ -8995,6 +9005,18 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"react-remove-scroll-bar@npm:^2.3.3":
|
||||||
version: 2.3.4
|
version: 2.3.4
|
||||||
resolution: "react-remove-scroll-bar@npm:2.3.4"
|
resolution: "react-remove-scroll-bar@npm:2.3.4"
|
||||||
@ -9981,6 +10003,7 @@ __metadata:
|
|||||||
react-intersection-observer: ^9.5.1
|
react-intersection-observer: ^9.5.1
|
||||||
react-intl: ^6.4.4
|
react-intl: ^6.4.4
|
||||||
react-markdown: ^8.0.7
|
react-markdown: ^8.0.7
|
||||||
|
react-progressive-graceful-image: ^0.7.0
|
||||||
react-router-dom: ^6.13.0
|
react-router-dom: ^6.13.0
|
||||||
react-tag-input-component: ^2.0.2
|
react-tag-input-component: ^2.0.2
|
||||||
semantic-sdp: ^3.26.3
|
semantic-sdp: ^3.26.3
|
||||||
|
Loading…
Reference in New Issue
Block a user