image optimization

website/src/pages/index.js

@@ -1,4 +1,5 @@
 import ExploreButton from './exploreButton/exploreButton';
+import PreloadImages from './preloadImages/preloadImages';
 import FadeInContent from './utils/fadeInContent';
 import StartPanel from './startPanel/startPanel';
 import Features from './features/features';
@@ -11,9 +12,10 @@ import './index.css';
 export default function Home() {
   const homepageContentRef = React.useRef(null);
   return (
-    <Layout description="Fully customisable editable table component">
+    <Layout description="Framework agnostic chat component that can power any API">
       <main>
         <FadeInNav></FadeInNav>
+        <PreloadImages></PreloadImages>
         <div id="homepage-content" ref={homepageContentRef} className="invisible-component">
           <StartPanel></StartPanel>
           <Features></Features>

website/src/pages/preloadImages/preloadImages.css

@@ -0,0 +1,5 @@
+.preload-image {
+  width: 1px;
+  position: absolute;
+  opacity: 0.1;
+}

website/src/pages/preloadImages/preloadImages.js

@@ -0,0 +1,73 @@
+import huggingFaceLogo from '/img/huggingFaceLogo.png';
+import lofiBackground from '/img/lofi-background.webp';
+import blueBackground from '/img/blue-background.jpg';
+import assemblyAILogo from '/img/assemblyAILogo.png';
+import openAILogo from '/img/openAILogo.png';
+import cohereLogo from '/img/cohereLogo.png';
+import azureLogo from '/img/azureLogo.png';
+import bird from '/img/bird.jpeg';
+import city from '/img/city.jpeg';
+import './preloadImages.css';
+import React from 'react';
+
+// this is an optimization approach to stop images rendering whilst they are being displayed
+export default function PreloadImages() {
+  const [displayContentImages, setDisplayContentImages] = React.useState(false);
+  const [displayBackgroundImages, setDisplayBackgroundImages] = React.useState(false);
+
+  // executed sequentially from what is displayed first
+  React.useEffect(() => {
+    let isMounted = true;
+    setTimeout(() => {
+      if (isMounted) {
+        setDisplayContentImages(true);
+        setTimeout(() => {
+          if (isMounted) setDisplayBackgroundImages(true);
+        }, 2000);
+      }
+    }, 1000);
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return (
+    <div>
+      <div className="preload-image">
+        <img src={huggingFaceLogo} />
+      </div>
+      <div className="preload-image">
+        <img src={openAILogo} />
+      </div>
+      <div className="preload-image">
+        <img src={cohereLogo} />
+      </div>
+      <div className="preload-image">
+        <img src={azureLogo} />
+      </div>
+      <div className="preload-image">
+        <img src={assemblyAILogo} />
+      </div>
+      {displayContentImages && (
+        <div>
+          <div className="preload-image">
+            <img src={bird} />
+          </div>
+          <div className="preload-image">
+            <img src={city} />
+          </div>
+        </div>
+      )}
+      {displayBackgroundImages && (
+        <div>
+          <div className="preload-image">
+            <img src={blueBackground} />
+          </div>
+          <div className="preload-image">
+            <img src={lofiBackground} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

website/src/pages/startPanel/startPanel.js

@@ -75,8 +75,8 @@ function ComponentPanel() {
   const component = React.useRef(null);
   const messageBubble = React.useRef(null);
   const messageLine = React.useRef(null);
-  setTimeout(() => displayLogos(logos.current), 700);
-  setTimeout(() => animate(component.current, logos.current, messageLine.current, messageBubble.current), 1800);
+  setTimeout(() => displayLogos(logos.current), 800);
+  setTimeout(() => animate(component.current, logos.current, messageLine.current, messageBubble.current), 1900);
   return (
     <div id="start-panel-animation-content-container">
       <div id="start-panel-component" ref={component} className={'start-panel-component-center'}>

website/src/pages/startPanel/startPanelParticles.js

@@ -5,6 +5,7 @@ import React, {useCallback} from 'react';
 import {loadFull} from 'tsparticles';
 import './startPanelParticles.css';
 
+// Particles throws error on navigatiion to another page - but I can't seem to be able to suppress it
 export default function StartPanelParticles() {
   return (
     <BrowserOnly>

website/src/pages/utils/fadeInContent.js

@@ -10,7 +10,7 @@ export default function FadeInContent({contentRef}) {
         // in a timeout as moving back to the homepage from a different tab has the page ref 'current' as null
         setTimeout(() => {
           if (contentRef?.current) contentRef.current.className = 'fade-in';
-        }, 200);
+        }, 300);
       }}
     </BrowserOnly>
   );

website/src/pages/utils/fadeInNav.js

@@ -12,7 +12,7 @@ export default function FadeInNav() {
           // because the selector is used to set opacity 0 at the start - its opacity takes over
           // after the animation is finished - hence we manually set it here
           if (navbar) navbar.style.opacity = '1';
-        }, 1800);
+        }, 1900);
         navToggle.fadeIn();
         navToggle.readdAutoNavShadowToggle();
       }}