web(memory): load Monaco editor lazily via DynamicAppCodeEditor in all consumers; use dynamic BusterChart in test playground

Co-Authored-By: nate@buster.so <nate@buster.so>
This commit is contained in:
Devin AI 2025-08-08 05:34:35 +00:00
parent 9713237819
commit b979e208f7
6 changed files with 19 additions and 7 deletions

View File

@ -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<{

View File

@ -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() {
<h4 className="text-sm font-semibold text-green-800">Chart Ready</h4>
</div>
<div className="rounded-lg bg-white p-4 shadow-sm">
<BusterChart {...chartConfig} data={data} columnMetadata={columnMetadata} />
<BusterChartDynamic {...chartConfig} data={data} columnMetadata={columnMetadata} />
</div>
</div>
)}

View File

@ -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';

View File

@ -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';

View File

@ -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: () => <CircleSpinnerLoaderContainer className="animate-in fade-in-0 duration-300" />
}
);
export default DynamicAppCodeEditor;

View File

@ -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';