administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-12 22:25:24 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add lazy loading

Browse Source
This commit is contained in:
Sam Wright 2024-06-20 01:36:07 +10:00
parent 684399bacb
commit 1e5a1622fb
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/code_editor/CodeEditor.tsx
View File

@ -1,6 +1,6 @@
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { MonacoEditor } from "./MonacoEditor"; import { lazy } from "react";
import { CodeMirrorEditor } from "./CodeMirrorEditor"; import MonacoEditor from "./MonacoEditor";
/** /**
* Provides an interface for a Code Editor, to enable easy swapping between different implementations * Provides an interface for a Code Editor, to enable easy swapping between different implementations
@ -18,6 +18,6 @@ export type CodeEditorProps = {
* *
* It would be great to revisit this in in the future if/when Monaco improves mobile support. * It would be great to revisit this in in the future if/when Monaco improves mobile support.
*/ */
export const CodeEditor: (props: CodeEditorProps) => JSX.Element = isDesktop export const CodeEditor: (props: CodeEditorProps) => React.ReactNode = isDesktop
? MonacoEditor ? MonacoEditor
: CodeMirrorEditor; : lazy(() => import("./CodeMirrorEditor"));

2
web/src/components/code_editor/CodeMirrorEditor.tsx
View File

@ -41,7 +41,7 @@ import { useTheme } from "@/context/theme-provider";
* Uses `CodeMirror` as a code editor implementation. * Uses `CodeMirror` as a code editor implementation.
* Currently doesn't support yaml schema validation or linting. * Currently doesn't support yaml schema validation or linting.
*/ */
export function CodeMirrorEditor({ export default function CodeMirrorEditor({
initialContent, initialContent,
onDidChangeContent, onDidChangeContent,
}: Omit<CodeEditorProps, "schemaUrl">) { }: Omit<CodeEditorProps, "schemaUrl">) {

2
web/src/components/code_editor/MonacoEditor.tsx
View File

@ -4,7 +4,7 @@ import { configureMonacoYaml } from "monaco-yaml";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import type { CodeEditorProps } from "./CodeEditor"; import type { CodeEditorProps } from "./CodeEditor";
export function MonacoEditor({ export default function MonacoEditor({
initialContent, initialContent,
yamlSchemaUrl, yamlSchemaUrl,
onDidChangeContent, onDidChangeContent,