From bc53c38fc5d99d94d245819229ff2226126cc113 Mon Sep 17 00:00:00 2001 From: Hasan Yahya Date: Mon, 1 Jul 2024 00:31:34 +0500 Subject: [PATCH] refactor: Add lazy loading for images in Playground component --- public/sorry.svg | 572 --------------------------- src/App.jsx | 7 +- src/components/component/apology.jsx | 36 +- 3 files changed, 38 insertions(+), 577 deletions(-) delete mode 100644 public/sorry.svg diff --git a/public/sorry.svg b/public/sorry.svg deleted file mode 100644 index 14237b8..0000000 --- a/public/sorry.svg +++ /dev/null @@ -1,572 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/App.jsx b/src/App.jsx index 9de1ee7..f928baf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,7 +9,12 @@ const isDesktop = () => { }; function App() { - if (isDesktop()) { + const [isDesktopDevice, setIsDesktopDevice] = React.useState(null); + + React.useEffect(() => { + setIsDesktopDevice(isDesktop()); + }, []); + if (isDesktopDevice === true) { return ( ) diff --git a/src/components/component/apology.jsx b/src/components/component/apology.jsx index fe7ff42..a38a606 100644 --- a/src/components/component/apology.jsx +++ b/src/components/component/apology.jsx @@ -1,8 +1,36 @@ export default function Apology() { return ( -
- -

Sorry! This app is only available on desktop.

+
+
+ +

+ Sorry, this website is only available for desktop +

+

+ We apologize for the inconvenience, but our website is currently optimized for desktop devices only. Please + try accessing this site from a computer or laptop. +

+
- ); + ) +} + +function SmartphoneIcon(props) { + return ( + + + + + ) } \ No newline at end of file