From d835ef9c6e6e44d237cd5d58421157fdab29d1ab Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 04:32:46 +0000
Subject: [PATCH 1/2] feat: enhance Terminal component with loading state and
 styles

- Updated Terminal component to include a loading state while the iframe is being rendered.
- Added new styles for loading animation and logo in Terminal.scss.
- Implemented a delay for iframe rendering to improve user experience during loading.
---
 src/frontend/src/pad/containers/Terminal.scss | 37 ++++++++++++++++-
 src/frontend/src/pad/containers/Terminal.tsx  | 41 ++++++++++++++++---
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/pad/containers/Terminal.scss b/src/frontend/src/pad/containers/Terminal.scss
index 31a9462..58cd9f0 100644
--- a/src/frontend/src/pad/containers/Terminal.scss
+++ b/src/frontend/src/pad/containers/Terminal.scss
@@ -8,11 +8,46 @@
 
 .terminal-iframe {
   flex: 1;
-  background-color: #1e1e1e;
+  background-color: #000000;
   height: 100%;
   width: 100%;
   border: 0px !important;
   overflow: hidden;
   border-bottom-left-radius: var(--embeddable-radius);
   border-bottom-right-radius: var(--embeddable-radius);
+  
+  &--loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+}
+
+.terminal-loading-animation {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.terminal-loading-logo {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+  animation: terminal-logo-slide 300ms cubic-bezier(0.00, 1.26, 0.64, 0.95) forwards;
+  position: relative;
+}
+
+@keyframes terminal-logo-slide {
+  from {
+    transform: translateX(-100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
diff --git a/src/frontend/src/pad/containers/Terminal.tsx b/src/frontend/src/pad/containers/Terminal.tsx
index 768e09c..3c4d1ee 100644
--- a/src/frontend/src/pad/containers/Terminal.tsx
+++ b/src/frontend/src/pad/containers/Terminal.tsx
@@ -26,6 +26,8 @@ export const Terminal: React.FC<TerminalProps> = ({
 }) => {
   const { data: workspaceState } = useWorkspaceState();
   const [terminalId, setTerminalId] = useState<string | null>(null);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [shouldRenderIframe, setShouldRenderIframe] = useState(false);
   const elementIdRef = useRef(element?.id);
   const isInitializedRef = useRef(false);
 
@@ -172,13 +174,42 @@ export const Terminal: React.FC<TerminalProps> = ({
 
   const terminalUrl = getTerminalUrl();
 
+  // Effect to delay loading the iframe
+  useEffect(() => {
+    // Set a small timeout to allow the scrolling to complete first
+    const timer = setTimeout(() => {
+      setShouldRenderIframe(true);
+    }, 500); // 300ms delay should be enough for the scroll animation to start
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Handle iframe load event
+  const handleIframeLoad = () => {
+    setIframeLoaded(true);
+    console.debug('[pad.ws] Terminal iframe loaded');
+  };
+
   return (
     <div className="terminal-container">
-      <iframe 
-        className="terminal-iframe" 
-        src={terminalUrl} 
-        title="Terminal"
-      />
+      {shouldRenderIframe ? (
+        <iframe 
+          className="terminal-iframe" 
+          src={terminalUrl} 
+          title="Terminal"
+          onLoad={handleIframeLoad}
+        />
+      ) : (
+        <div className="terminal-iframe terminal-iframe--loading">
+          <div className="terminal-loading-animation">
+            <img 
+              src="/assets/images/favicon.png" 
+              alt="pad.ws logo" 
+              className="terminal-loading-logo" 
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

From d4f3433113810f51470a5d176b58c5f8235745b5 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 04:38:14 +0000
Subject: [PATCH 2/2] style: enhance terminal loading user experience

- Added a wrapper for the iframe to manage loading states more effectively.
- Introduced new CSS classes for loading and loaded states to enhance user experience.
- Updated loading animation styles for better visibility and transitions during iframe loading.
---
 src/frontend/src/pad/containers/Terminal.scss | 33 +++++++++++++++++++
 src/frontend/src/pad/containers/Terminal.tsx  | 23 +++++++++----
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/pad/containers/Terminal.scss b/src/frontend/src/pad/containers/Terminal.scss
index 58cd9f0..0d4a7b2 100644
--- a/src/frontend/src/pad/containers/Terminal.scss
+++ b/src/frontend/src/pad/containers/Terminal.scss
@@ -6,6 +6,17 @@
   overflow: hidden;
 }
 
+.terminal-iframe-wrapper {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-bottom-left-radius: var(--embeddable-radius);
+  border-bottom-right-radius: var(--embeddable-radius);
+  background-color: #000000;
+}
+
 .terminal-iframe {
   flex: 1;
   background-color: #000000;
@@ -22,6 +33,16 @@
     justify-content: center;
     position: relative;
   }
+  
+  &--loading-fade {
+    opacity: 0;
+    transition: opacity 0.5s ease-in;
+  }
+  
+  &--loaded {
+    opacity: 1;
+    transition: opacity 0.5s ease-in;
+  }
 }
 
 .terminal-loading-animation {
@@ -31,6 +52,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  
+  &--fade {
+    opacity: 1;
+    transition: opacity 0.15s ease-out;
+    z-index: 1;
+    background-color: #000000;
+  }
+  
+  &--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .terminal-loading-logo {
diff --git a/src/frontend/src/pad/containers/Terminal.tsx b/src/frontend/src/pad/containers/Terminal.tsx
index 3c4d1ee..9460bba 100644
--- a/src/frontend/src/pad/containers/Terminal.tsx
+++ b/src/frontend/src/pad/containers/Terminal.tsx
@@ -179,7 +179,7 @@ export const Terminal: React.FC<TerminalProps> = ({
     // Set a small timeout to allow the scrolling to complete first
     const timer = setTimeout(() => {
       setShouldRenderIframe(true);
-    }, 500); // 300ms delay should be enough for the scroll animation to start
+    }, 500);
 
     return () => clearTimeout(timer);
   }, []);
@@ -193,12 +193,21 @@ export const Terminal: React.FC<TerminalProps> = ({
   return (
     <div className="terminal-container">
       {shouldRenderIframe ? (
-        <iframe 
-          className="terminal-iframe" 
-          src={terminalUrl} 
-          title="Terminal"
-          onLoad={handleIframeLoad}
-        />
+        <div className="terminal-iframe-wrapper">
+          <iframe 
+            className={`terminal-iframe ${iframeLoaded ? 'terminal-iframe--loaded' : 'terminal-iframe--loading-fade'}`}
+            src={terminalUrl} 
+            title="Terminal"
+            onLoad={handleIframeLoad}
+          />
+          <div className={`terminal-loading-animation terminal-loading-animation--fade ${iframeLoaded ? 'terminal-loading-animation--hidden' : ''}`}>
+            <img 
+              src="/assets/images/favicon.png" 
+              alt="pad.ws logo" 
+              className="terminal-loading-logo" 
+            />
+          </div>
+        </div>
       ) : (
         <div className="terminal-iframe terminal-iframe--loading">
           <div className="terminal-loading-animation">