chore: progressive image POC

package.json

@@ -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",

src/element/login-signup.tsx

@@ -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" />

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