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.

Author: atyrode

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 {

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