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.

Author: atyrode

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;
+  }
 }

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>
   );
 };