diff --git a/src/components/data-entry/QueryItem/ValueSelector.stories.tsx b/src/components/data-entry/QueryItem/ValueSelector.stories.tsx
index 432a381cf..7e589d49d 100644
--- a/src/components/data-entry/QueryItem/ValueSelector.stories.tsx
+++ b/src/components/data-entry/QueryItem/ValueSelector.stories.tsx
@@ -1,9 +1,12 @@
 import { type Meta, type StoryObj } from '@storybook/react'
-import ValueSelector from './ValueSelector'
+import type ValueSelector from './ValueSelector'
+import { Suspense, lazy } from 'react'
+
+const _ValueSelector = lazy(async () => await import('./ValueSelector'))
 
 const meta: Meta<typeof ValueSelector> = {
   title: 'Aquarium/Data Entry/QueryItem/ValueSelector',
-  component: ValueSelector,
+  component: _ValueSelector,
   parameters: {
     docs: {
       description: {
@@ -12,11 +15,17 @@ const meta: Meta<typeof ValueSelector> = {
       },
     },
   },
-
+  decorators: [
+    Story => (
+      <Suspense>
+        <Story />
+      </Suspense>
+    ),
+  ],
   args: {},
 }
 export default meta
 
 type Story = StoryObj<typeof ValueSelector>
 
-export const DontUseThisOrYouWillBeFired: Story = {}
\ No newline at end of file
+export const DontUseThisOrYouWillBeFired: Story = {}