feat(inventory,dashboard,types,core-flows,js-sdk,medusa): Improve inventory UX (#10630)

* feat(dashboard): Add UI for bulk editing inventory stock (#10556)

* progress

* cleanup types

* add changeset

* fix 0 values

* format schema

* add delete event and allow copy/pasting enabled for some fields

* add response types

* add tests

* work on fixing setValue behaviour

* cleanup toggle logic

* add loading state

* format schema

* add support for bidirectional actions in DataGrid and update Checkbox and RadioGroup

* update lock

* lint

* fix 404

* address feedback

* update cursor on bidirectional select

packages/admin/dashboard/src/components/layout/shell/shell.tsx

@@ -2,28 +2,47 @@ import * as Dialog from "@radix-ui/react-dialog"
 
 import { SidebarLeft, TriangleRightMini, XMark } from "@medusajs/icons"
 import { IconButton, clx } from "@medusajs/ui"
-import { PropsWithChildren, ReactNode } from "react"
+import { AnimatePresence } from "motion/react"
+import { PropsWithChildren, ReactNode, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Link, Outlet, UIMatch, useMatches } from "react-router-dom"
+import {
+  Link,
+  Outlet,
+  UIMatch,
+  useMatches,
+  useNavigation,
+} from "react-router-dom"
 
 import { KeybindProvider } from "../../../providers/keybind-provider"
 import { useGlobalShortcuts } from "../../../providers/keybind-provider/hooks"
 import { useSidebar } from "../../../providers/sidebar-provider"
+import { ProgressBar } from "../../common/progress-bar"
 import { Notifications } from "../notifications"
 
 export const Shell = ({ children }: PropsWithChildren) => {
   const globalShortcuts = useGlobalShortcuts()
+  const navigation = useNavigation()
+
+  const loading = navigation.state === "loading"
 
   return (
     <KeybindProvider shortcuts={globalShortcuts}>
-      <div className="flex h-screen flex-col items-start overflow-hidden lg:flex-row">
+      <div className="relative flex h-screen flex-col items-start overflow-hidden lg:flex-row">
+        <NavigationBar loading={loading} />
         <div>
           <MobileSidebarContainer>{children}</MobileSidebarContainer>
           <DesktopSidebarContainer>{children}</DesktopSidebarContainer>
         </div>
         <div className="flex h-screen w-full flex-col overflow-auto">
           <Topbar />
-          <main className="flex h-full w-full flex-col items-center overflow-y-auto">
+          <main
+            className={clx(
+              "flex h-full w-full flex-col items-center overflow-y-auto transition-opacity delay-200 duration-200",
+              {
+                "opacity-25": loading,
+              }
+            )}
+          >
             <Gutter>
               <Outlet />
             </Gutter>
@@ -34,6 +53,36 @@ export const Shell = ({ children }: PropsWithChildren) => {
   )
 }
 
+const NavigationBar = ({ loading }: { loading: boolean }) => {
+  const [showBar, setShowBar] = useState(false)
+
+  /**
+   * If the loading state is true, we want to show the bar after a short delay.
+   * The delay is used to prevent the bar from flashing on quick navigations.
+   */
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>
+
+    if (loading) {
+      timeout = setTimeout(() => {
+        setShowBar(true)
+      }, 200)
+    } else {
+      setShowBar(false)
+    }
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [loading])
+
+  return (
+    <div className="fixed inset-x-0 top-0 z-50 h-1">
+      <AnimatePresence>{showBar ? <ProgressBar /> : null}</AnimatePresence>
+    </div>
+  )
+}
+
 const Gutter = ({ children }: PropsWithChildren) => {
   return (
     <div className="flex w-full max-w-[1600px] flex-col gap-y-2 p-3">