Add 'fill' prop to Stack Components (#1509)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Add a "fill" prop to InlineStack and BlockStack. And a LoadingScreen component which consumes it. Also propagate the"fill" prop to a few other locations where it's useful.

"fill" prop fills all available space and centres content inside of it.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/Editor/PipelineEditor.tsx

@@ -11,7 +11,6 @@ import {
 } from "@/components/shared/ReactFlow";
 import { UndoRedo } from "@/components/shared/UndoRedo";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Spinner } from "@/components/ui/spinner";
 import { AutoSaveProvider } from "@/providers/AutoSaveProvider";
 import { ComponentLibraryProvider } from "@/providers/ComponentLibraryProvider";
 import { ForcedSearchProvider } from "@/providers/ComponentLibraryProvider/ForcedSearchProvider";
@@ -22,6 +21,7 @@ import {
 import { ContextPanelProvider } from "@/providers/ContextPanelProvider";
 import { PipelineRunsProvider } from "@/providers/PipelineRunsProvider";
 
+import { LoadingScreen } from "../shared/LoadingScreen";
 import { NodesOverlayProvider } from "../shared/ReactFlow/NodesOverlay/NodesOverlayProvider";
 import PipelineDetails from "./PipelineDetails";
 
@@ -47,12 +47,7 @@ const PipelineEditor = () => {
 
   // If the pipeline is loading or the component spec is empty, show a loading spinner
   if (isLoading || componentSpec === EMPTY_GRAPH_COMPONENT_SPEC) {
-    return (
-      <div className="w-full h-full flex flex-col items-center justify-center">
-        <Spinner className="mr-2 w-10 h-10" />
-        <p className="text-secondary-foreground">Loading pipeline...</p>
-      </div>
-    );
+    return <LoadingScreen message="Loading Pipeline" />;
   }
 
   return (
@@ -62,9 +57,9 @@ const PipelineEditor = () => {
           <ContextPanelProvider defaultContent={<PipelineDetails />}>
             <ForcedSearchProvider>
               <ComponentLibraryProvider>
-                <InlineStack className="w-full h-full" align="start">
+                <InlineStack fill>
                   <FlowSidebar />
-                  <BlockStack className="flex-1 h-full relative">
+                  <BlockStack fill className="flex-1 relative">
                     <FlowCanvas {...flowConfig}>
                       <MiniMap position="bottom-left" pannable />
                       <FlowControls

src/components/Home/PipelineSection/PipelineSection.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from "@tanstack/react-router";
 import { type ChangeEvent, useEffect, useState } from "react";
 
+import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import NewPipelineButton from "@/components/shared/NewPipelineButton";
 import QuickStartCards from "@/components/shared/QuickStart/QuickStartCards";
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
@@ -12,7 +13,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
 import {
   Table,
   TableBody,
@@ -126,11 +126,7 @@ export const PipelineSection = withSuspenseWrapper(() => {
   }, []);
 
   if (isLoading) {
-    return (
-      <InlineStack gap="2" className="mt-4">
-        <Spinner /> Loading...
-      </InlineStack>
-    );
+    return <LoadingScreen message="Loading Pipelines" />;
   }
 
   if (pipelines.size === 0) {

src/components/PipelineRun/PipelineRunPage.tsx

@@ -33,8 +33,8 @@ const PipelineRunPage = () => {
   return (
     <ContextPanelProvider defaultContent={<RunDetails />}>
       <ComponentLibraryProvider>
-        <InlineStack className="w-full h-full" align="start">
-          <BlockStack className="flex-1 h-full">
+        <InlineStack fill>
+          <BlockStack fill className="flex-1">
             <FlowCanvas {...flowConfig} readOnly>
               <MiniMap position="bottom-left" pannable />
               <FlowControls

src/components/shared/LoadingScreen.tsx

@@ -0,0 +1,20 @@
+import { BlockStack } from "@/components/ui/layout";
+import { Spinner } from "@/components/ui/spinner";
+import { Paragraph } from "@/components/ui/typography";
+
+interface LoadingScreenProps {
+  message?: string;
+}
+
+export const LoadingScreen = ({
+  message = "Loading content",
+}: LoadingScreenProps) => {
+  return (
+    <BlockStack fill>
+      <Spinner size={32} />
+      <Paragraph tone="subdued" size="sm">
+        {message}
+      </Paragraph>
+    </BlockStack>
+  );
+};

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -947,7 +947,7 @@ const FlowCanvas = ({
   const selectionMode = getSelectionMode();
 
   return (
-    <BlockStack className="h-full w-full">
+    <BlockStack fill>
       <SubgraphBreadcrumbs />
       <ReactFlow
         {...rest}

src/components/ui/layout.tsx

@@ -45,6 +45,8 @@ interface BlockStackProps
    * @default 'div'
    */
   as?: StackElement;
+  /** Fill the container and center content */
+  fill?: boolean;
   /** Additional CSS classes */
   className?: string;
 }
@@ -55,9 +57,10 @@ export const BlockStack = forwardRef<
 >((props, ref) => {
   const {
     as: Element = "div",
+    fill = false,
     className = "",
-    align = "start",
-    inlineAlign = "start",
+    align = fill ? "center" : "start",
+    inlineAlign = fill ? "center" : "start",
     gap = "0",
     children,
     ...rest
@@ -66,6 +69,7 @@ export const BlockStack = forwardRef<
   return (
     <Element
       className={cn(
+        { "h-full w-full": fill },
         blockStackVariants({ align, inlineAlign, gap }),
         className.split(" "),
       )}
@@ -119,6 +123,8 @@ interface InlineStackProps
    * @default 'div'
    */
   as?: StackElement;
+  /** Fill the container and center content */
+  fill?: boolean;
   /** Additional CSS classes */
   className?: string;
 }
@@ -129,7 +135,8 @@ export const InlineStack = forwardRef<
 >((props, ref) => {
   const {
     as: Element = "div",
-    align = "start",
+    fill = false,
+    align = fill ? "center" : "start",
     blockAlign = "center",
     gap = "0",
     wrap = "wrap",
@@ -141,6 +148,7 @@ export const InlineStack = forwardRef<
   return (
     <Element
       className={cn(
+        { "h-full w-full": fill },
         inlineStackVariants({ align, blockAlign, gap, wrap }),
         className,
       )}

src/routes/Editor/Editor.tsx

@@ -5,34 +5,30 @@ import { ReactFlowProvider } from "@xyflow/react";
 
 import PipelineEditor from "@/components/Editor/PipelineEditor";
 import { InfoBox } from "@/components/shared/InfoBox";
+import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import { BlockStack } from "@/components/ui/layout";
-import { Text } from "@/components/ui/typography";
+import { Paragraph } from "@/components/ui/typography";
 import { useLoadComponentSpecFromPath } from "@/hooks/useLoadComponentSpecFromPath";
 
 const Editor = () => {
   const { componentSpec, error } = useLoadComponentSpecFromPath();
 
   if (error) {
     return (
-      <BlockStack
-        align="center"
-        inlineAlign="center"
-        gap="4"
-        className="h-full"
-      >
+      <BlockStack fill gap="4">
         <InfoBox variant="error" title="Error loading pipeline">
           {error}
         </InfoBox>
-        <Text tone="subdued" size="sm">
+        <Paragraph tone="subdued" size="sm">
           Tip: Pipelines are stored locally and are not shareable by URL. To
           share a pipeline it needs to be exported.
-        </Text>
+        </Paragraph>
       </BlockStack>
     );
   }
 
   if (!componentSpec) {
-    return <div>Loading...</div>;
+    return <LoadingScreen message="Loading Pipeline" />;
   }
 
   return (

src/routes/PipelineRun/PipelineRun.test.tsx

@@ -254,6 +254,6 @@ describe("<PipelineRun/>", () => {
     );
 
     // assert
-    expect(getByText("Loading Pipeline Run...")).toBeInTheDocument();
+    expect(getByText("Loading Pipeline Run")).toBeInTheDocument();
   });
 });

src/routes/PipelineRun/PipelineRun.tsx

@@ -5,7 +5,9 @@ import { useEffect } from "react";
 
 import PipelineRunPage from "@/components/PipelineRun";
 import { InfoBox } from "@/components/shared/InfoBox";
-import { Spinner } from "@/components/ui/spinner";
+import { LoadingScreen } from "@/components/shared/LoadingScreen";
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph } from "@/components/ui/typography";
 import { faviconManager } from "@/favicon";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
 import { useBackend } from "@/providers/BackendProvider";
@@ -72,52 +74,48 @@ const PipelineRunContent = () => {
   });
 
   if (isLoading || !ready) {
-    return (
-      <div className="flex items-center justify-center h-full w-full gap-2">
-        <Spinner /> Loading Pipeline Run...
-      </div>
-    );
+    return <LoadingScreen message="Loading Pipeline Run" />;
   }
 
   if (!configured) {
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <BlockStack fill>
         <InfoBox title="Backend not configured" variant="warning">
           Configure a backend to view this pipeline run.
         </InfoBox>
-      </div>
+      </BlockStack>
     );
   }
 
   if (!available) {
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <BlockStack fill>
         <InfoBox title="Backend not available" variant="error">
           The configured backend is not available.
         </InfoBox>
-      </div>
+      </BlockStack>
     );
   }
 
   if (!componentSpec) {
     return (
-      <div className="flex items-center justify-center h-full w-full">
+      <BlockStack fill>
         <InfoBox title="Error loading pipeline run" variant="error">
           No pipeline data available.
         </InfoBox>
-      </div>
+      </BlockStack>
     );
   }
 
   if (error) {
     const backendStatusString = getBackendStatusString(configured, available);
     return (
-      <div className="flex items-center justify-center h-full w-full gap-2">
+      <BlockStack fill>
         <InfoBox title="Error loading pipeline run" variant="error">
-          <div className="mb-2">{error.message}</div>
-          <div className="text-black italic">{backendStatusString}</div>
+          <Paragraph className="mb-2">{error.message}</Paragraph>
+          <Paragraph className="italic">{backendStatusString}</Paragraph>
         </InfoBox>
-      </div>
+      </BlockStack>
     );
   }