2190 better loading spinner (#2267)

* 2198: Wfo loading spinner stub

* 2190: WIP Loading spinner

* 2190: Improve spiderweb path

* Adds changeset

* 2190: Use logoSpinner in default WfoAuth component

---------

Co-authored-by: Ruben van Leeuwen <[email protected]>

Author: DutchBen

.changeset/free-cloths-bow.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Adds WfoLogoSpinner to use as initial loading component

packages/orchestrator-ui-components/src/components/WfoAuth/WfoAuth.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useContext } from 'react';
 
-import { WfoLoading } from '@/components';
+import { WfoLogoSpinner } from '@/components';
 import { OrchestratorConfigContext } from '@/contexts';
 import { PolicyContextProvider } from '@/contexts/PolicyContext';
 import { useWfoSession } from '@/hooks';
@@ -39,7 +39,7 @@ export const WfoAuth = ({
     });
 
     if (status === 'loading') {
-        return <WfoLoading />;
+        return <WfoLogoSpinner />;
     }
 
     return (

packages/orchestrator-ui-components/src/components/WfoLogoSpinner/WfoLogoSpinner.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+
+import { getWfoLogoSpinnerStyles } from './styles';
+
+export const WfoLogoSpinner: FC = () => {
+    const { spinContainerCss, spinCenteringCss, spinPathCss } =
+        getWfoLogoSpinnerStyles();
+
+    return (
+        <div css={spinCenteringCss}>
+            <div css={spinContainerCss}>
+                <svg
+                    width="64"
+                    height="64"
+                    viewBox="0 0 640 640"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        css={spinPathCss}
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M314 128H326V144.078L346.283 151.332C369.967 159.802 392.949 170.121 415.016 182.193L437.19 194.324L457.599 173.916L466.084 182.401L444.445 204.04L447.318 212.963C458.702 248.31 474.148 282.216 493.346 314H512V326H494.455L479.094 369.434L455.768 455.642L435.097 460.957C396.477 470.887 359.666 486.806 326 508.122V512H314V507.221C278.542 479.763 236.412 462.268 191.965 456.521L177.181 471.305L168.695 462.82L182.781 448.735L178.858 430.061C170.982 392.571 155.435 357.146 133.224 326H128V314H133.231C160.297 276.391 177.89 232.762 184.46 186.82L184.848 184.112L189.665 183.666C233.34 179.627 275.674 166.567 314 145.34V128ZM202.538 445.947C242.754 452.568 280.91 468.411 314 492.245V473.428L292.129 457.339C282.687 450.394 271.901 445.495 260.459 442.955L215.509 432.977L202.538 445.947ZM208.77 422.745L192.914 438.601L190.601 427.593C182.966 391.252 168.422 356.769 147.811 326H167.27L185.783 350.958C193.014 360.707 198.054 371.902 200.557 383.779L208.77 422.745ZM226.103 422.382L263.197 430.616C276.356 433.537 288.761 439.171 299.618 447.158L314 457.738V417.444L303.215 409.851C296.575 405.176 288.932 402.121 280.9 400.931L257.731 397.499L256.799 391.686L226.103 422.382ZM254.454 377.061L219.438 412.077L212.924 381.173C210.046 367.514 204.25 354.639 195.934 343.429L183.006 326H232.601L229.611 329.619L244.302 349.711C249.156 356.351 252.367 364.047 253.669 372.169L254.454 377.061ZM267.273 381.213L268.188 386.917L282.658 389.061C292.545 390.526 301.951 394.285 310.123 400.039L314 402.769L314 334.486L267.273 381.213ZM305.515 326L264.836 366.679C262.933 358.009 259.243 349.815 253.989 342.628L244.805 330.068L248.166 326H305.515ZM334.486 314H397.264L395.224 310.835C390.692 303.805 387.582 295.956 386.069 287.731L383.296 272.646L376.608 271.878L334.486 314ZM361.679 269.835L326 305.515V249.534L334.477 256.566C342.377 263.12 351.712 267.658 361.679 269.835ZM387.442 261.044L393.491 261.739L397.872 285.56C399.1 292.244 401.627 298.621 405.309 304.333L411.542 314H445.931L438.77 304.37C430.045 292.635 424.088 279.078 421.347 264.714L415.326 233.159L387.442 261.044ZM405.876 225.638L372.221 259.294L369.403 258.97C359.378 257.818 349.905 253.774 342.139 247.331L326 233.942V192.781L348.742 206.751C357.205 211.95 366.418 215.817 376.057 218.216L405.876 225.638ZM426.131 222.354L433.762 262.345C436.146 274.835 441.325 286.624 448.913 296.829L461.681 314H479.389C461.411 283.226 446.826 250.582 435.896 216.641L434.909 213.576L426.131 222.354ZM428.349 203.166L416.305 215.21L379.11 205.952C370.728 203.865 362.717 200.503 355.357 195.982L326 177.948V156.822L342.242 162.631C365.334 170.889 387.741 180.95 409.256 192.721L428.349 203.166ZM172.88 314H147.865C170.649 280.354 186.351 242.412 194.003 202.489L210.359 218.845L199.918 262.269C197.825 270.976 194.357 279.294 189.644 286.91L172.88 314ZM222.688 214.203L202.768 194.283C241.657 189.241 279.328 177.284 314 158.982V175.227L274.426 197.566C268.264 201.044 261.689 203.732 254.855 205.567L222.688 214.203ZM212.207 265.224L220.838 229.325L257.158 265.644L253.797 288.527C252.423 297.887 248.521 306.694 242.513 314H187.743L200.392 293.56C205.811 284.803 209.799 275.237 212.207 265.224ZM233.004 224.52L268.805 260.32L279.936 258.894C288.584 257.785 296.814 254.52 303.871 249.399L314 242.047V189.741L280.639 208.572C273.553 212.572 265.991 215.663 258.132 217.773L233.004 224.52ZM265.67 290.271L267.734 276.219L305.514 314H257.168C261.531 306.759 264.433 298.697 265.67 290.271ZM279.529 271.044L314 305.515V256.874L310.919 259.11C302.235 265.414 292.105 269.432 281.461 270.796L279.529 271.044ZM326 411.217L326 334.486L381.141 389.626L327.12 412.005L326 411.217ZM334.485 326L384.831 376.346L385.892 369.943C387.512 360.156 391.386 350.88 397.207 342.847L407.079 329.224L405 326H334.485ZM326 425.458L390.325 398.811L413.149 421.634L372.676 430.61C359.487 433.535 347.056 439.185 336.18 447.198L326 454.698V425.458ZM395.266 386.781L417.889 409.403L426.993 373.721C429.987 361.985 435.155 350.914 442.229 341.083L453.081 326H419.278L421.611 329.619L406.924 349.888C402.195 356.415 399.047 363.952 397.73 371.904L395.266 386.781ZM375.412 442.949L423.745 432.23L439.062 447.547L432.109 449.335C394.715 458.95 358.965 474.008 326 494.005V470.397L343.677 457.374C353.134 450.406 363.944 445.493 375.412 442.949ZM428.281 419.796L447.764 439.278L467.629 365.861L481.726 326H468.651L452.488 348.464C446.337 357.013 441.843 366.64 439.239 376.845L428.281 419.796Z"
+                        fill="#76B5E0"
+                    />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M217.061 279.988L198.893 323.312L236.306 407.902L319.312 323.568L402.325 404.358L439.577 318.177L402.325 238.609L369.47 270.173L392.538 315.708L385.493 336.836L319.327 272.592L252.74 340.151L245.423 323.568L252.74 296.229L217.061 279.988Z"
+                        fill="white"
+                    />
+                </svg>
+            </div>
+        </div>
+    );
+};

packages/orchestrator-ui-components/src/components/WfoLogoSpinner/index.ts

@@ -0,0 +1 @@
+export * from './WfoLogoSpinner';

packages/orchestrator-ui-components/src/components/WfoLogoSpinner/styles.ts

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+export const getWfoLogoSpinnerStyles = () => {
+    const spinCenteringCss = css({
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    });
+
+    const spinContainerCss = css({
+        display: 'flex',
+        alignItems: 'center',
+        width: '80px',
+        height: '80px',
+        margin: '0 auto',
+        justifyContent: 'center',
+        backgroundColor: '#04385F',
+        borderRadius: '8px',
+    });
+
+    const spinPathCss = css({
+        transformBox:
+            'fill-box' /* makes transform relative to the path itself */,
+        transformOrigin: 'center',
+        animation: 'spin 3s linear infinite',
+        '@keyframes spin': {
+            from: { transform: 'rotate(0deg)' },
+            to: { transform: 'rotate(360deg)' },
+        },
+    });
+
+    return {
+        spinContainerCss,
+        spinCenteringCss,
+        spinPathCss,
+    };
+};

packages/orchestrator-ui-components/src/components/index.ts

@@ -39,3 +39,4 @@ export * from './WfoPydanticForm';
 export * from './WfoSearchPage';
 export * from './WfoAgent';
 export * from './WfoMonacoCodeBlock';
+export * from './WfoLogoSpinner';