style: enhance terminal loading (#45)

* 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.

* 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,13 +6,81 @@
   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: #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;
+  }
+  
+  &--loading-fade {
+    opacity: 0;
+    transition: opacity 0.5s ease-in;
+  }
+  
+  &--loaded {
+    opacity: 1;
+    transition: opacity 0.5s ease-in;
+  }
+}
+
+.terminal-loading-animation {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  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 {
+  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,51 @@ 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);
+
+    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 ? (
+        <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">
+            <img 
+              src="/assets/images/favicon.png" 
+              alt="pad.ws logo" 
+              className="terminal-loading-logo" 
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };