feat(graph): add spinner on the projects page

graph/client/src/app/shell.tsx

@@ -6,9 +6,14 @@ import {
 import classNames from 'classnames';
 import { DebuggerPanel } from './ui-components/debugger-panel';
 import { getGraphService } from './machines/graph.service';
-import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import {
+  Outlet,
+  useNavigate,
+  useNavigation,
+  useParams,
+} from 'react-router-dom';
 import { getSystemTheme, Theme, ThemePanel } from '@nx/graph/ui-theme';
-import { Dropdown } from '@nx/graph/ui-components';
+import { Dropdown, Spinner } from '@nx/graph/ui-components';
 import { useCurrentPath } from './hooks/use-current-path';
 import { ExperimentalFeature } from './ui-components/experimental-feature';
 import { RankdirPanel } from './feature-projects/panels/rankdir-panel';
@@ -36,8 +41,9 @@ export function Shell(): JSX.Element {
   }
 
   const navigate = useNavigate();
+  const { state: navigationState } = useNavigation();
   const currentPath = useCurrentPath();
-  const { selectedWorkspaceId, selectedTaskId } = useParams();
+  const { selectedWorkspaceId } = useParams();
   const currentRoute = currentPath.currentPath;
 
   const topLevelRoute = currentRoute.startsWith('/tasks')
@@ -165,17 +171,23 @@ export function Shell(): JSX.Element {
           ></DebuggerPanel>
         ) : null}
 
-        {!nodesVisible ? (
+        {!nodesVisible || navigationState === 'loading' ? (
           <div
             data-cy="no-tasks-selected"
             className="flex h-full w-full items-center justify-center text-slate-700 dark:text-slate-400"
           >
-            <ArrowLeftCircleIcon className="mr-4 h-6 w-6" />
-            <h4>
-              Please select a{' '}
-              {currentRoute.startsWith('/tasks') ? 'task' : 'project'} in the
-              sidebar.
-            </h4>
+            {navigationState === 'loading' ? (
+              <Spinner></Spinner>
+            ) : (
+              <>
+                <ArrowLeftCircleIcon className="mr-4 h-6 w-6" />
+                <h4>
+                  Please select a{' '}
+                  {currentRoute.startsWith('/tasks') ? 'task' : 'project'} in
+                  the sidebar.
+                </h4>
+              </>
+            )}
           </div>
         ) : null}
 

graph/ui-components/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/debounced-text-input';
 export * from './lib/tag';
 export * from './lib/dropdown';
+export * from './lib/spinner';

graph/ui-components/src/lib/spinner.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner';
+
+const meta: Meta<typeof Spinner> = {
+  component: Spinner,
+  title: 'Shared/Spinner',
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Primary: Story = {
+  args: {
+    className: '',
+  },
+};

graph/ui-components/src/lib/spinner.tsx

@@ -0,0 +1,31 @@
+/**
+ * Spinner component from https://tailwindcss.com/docs/animation#spin
+ */
+
+import React from 'react';
+
+export type SpinnerProps = React.SVGProps<SVGSVGElement>;
+
+export function Spinner({ className, ...rest }: SpinnerProps) {
+  return (
+    <svg
+      className={`${className} animate-spin h-8 w-8`}
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      <circle
+        className="opacity-10"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        className="opacity-90"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}