From b979e208f72bba01b2af071a85b16ba8be227ecc Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 8 Aug 2025 05:34:35 +0000 Subject: [PATCH] web(memory): load Monaco editor lazily via DynamicAppCodeEditor in all consumers; use dynamic BusterChart in test playground Co-Authored-By: nate@buster.so --- .../[datasetId]/editor/MetadataContainer.tsx | 2 +- apps/web/src/app/test/chart-playground/page.tsx | 6 +++--- .../layouts/AppVerticalCodeSplitter/SQLContainer.tsx | 2 +- apps/web/src/components/ui/card/CodeCard.tsx | 2 +- .../ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx | 12 ++++++++++++ .../TermIndividualContent.tsx | 2 +- 6 files changed, 19 insertions(+), 7 deletions(-) create mode 100644 apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx diff --git a/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx b/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx index e41528510..5d49b53aa 100644 --- a/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx +++ b/apps/web/src/app/app/(primary_layout)/datasets/[datasetId]/editor/MetadataContainer.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor'; +import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor'; import { cn } from '@/lib/classMerge'; export const MetadataContainer: React.FC<{ diff --git a/apps/web/src/app/test/chart-playground/page.tsx b/apps/web/src/app/test/chart-playground/page.tsx index c6c24d1f1..6da0ca551 100644 --- a/apps/web/src/app/test/chart-playground/page.tsx +++ b/apps/web/src/app/test/chart-playground/page.tsx @@ -2,10 +2,10 @@ import { useMemo, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; -import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor'; +import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor'; import { yamlToJson } from '@/lib/yaml-to-json'; import { useRunSQL } from '@/api/buster_rest/sql/queryRequests'; -import { BusterChart } from '@/components/ui/charts/BusterChart'; +import { BusterChartDynamic } from '@/components/ui/charts/BusterChartDynamic'; import { ChartConfigPropsSchema, type ChartConfigProps, @@ -232,7 +232,7 @@ export default function ChartPlayground() {

Chart Ready

- +
)} diff --git a/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx b/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx index 2c522d049..d51b16424 100644 --- a/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx +++ b/apps/web/src/components/features/layouts/AppVerticalCodeSplitter/SQLContainer.tsx @@ -5,7 +5,7 @@ import { Button } from '@/components/ui/buttons/Button'; import { FileCard } from '@/components/ui/card/FileCard'; import { ErrorClosableContainer } from '@/components/ui/error/ErrorClosableContainer'; import { Command, ReturnKey } from '@/components/ui/icons'; -import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor'; +import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor'; import { useBusterNotifications } from '@/context/BusterNotifications'; import { useMemoizedFn } from '@/hooks'; import type { AppVerticalCodeSplitterProps } from './AppVerticalCodeSplitter'; diff --git a/apps/web/src/components/ui/card/CodeCard.tsx b/apps/web/src/components/ui/card/CodeCard.tsx index 3aee9e75c..09d4cc88b 100644 --- a/apps/web/src/components/ui/card/CodeCard.tsx +++ b/apps/web/src/components/ui/card/CodeCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor'; +import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor'; import { useBusterNotifications } from '@/context/BusterNotifications'; import { useMemoizedFn } from '@/hooks'; import { Button } from '../buttons/Button'; diff --git a/apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx b/apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx new file mode 100644 index 000000000..b4ac4c2d7 --- /dev/null +++ b/apps/web/src/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor.tsx @@ -0,0 +1,12 @@ +import dynamic from 'next/dynamic'; +import { CircleSpinnerLoaderContainer } from '../../loaders/CircleSpinnerLoaderContainer'; + +export const DynamicAppCodeEditor = dynamic( + () => import('./AppCodeEditor').then((mod) => mod.AppCodeEditor), + { + ssr: false, + loading: () => + } +); + +export default DynamicAppCodeEditor; diff --git a/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx b/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx index da2f71b08..b51c91621 100644 --- a/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx +++ b/apps/web/src/controllers/TermIndividualController/TermIndividualContent.tsx @@ -8,7 +8,7 @@ import { Button } from '@/components/ui/buttons'; import { Card, CardContent, CardHeader } from '@/components/ui/card/CardBase'; import { Dropdown, type DropdownItems } from '@/components/ui/dropdown'; import { CircleQuestion, Dots, EditSquare, Trash } from '@/components/ui/icons'; -import { AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor'; +import { DynamicAppCodeEditor as AppCodeEditor } from '@/components/ui/inputs/AppCodeEditor/DynamicAppCodeEditor'; import { InputTextArea } from '@/components/ui/inputs/InputTextArea'; import { Text } from '@/components/ui/typography'; import { EditableTitle } from '@/components/ui/typography/EditableTitle';