fix: improve the loading bot performance

Composer/packages/client/__tests__/pages/botProjectsSettings/RootBotExternalService.test.tsx

@@ -13,7 +13,7 @@ import {
   projectMetaDataState,
   botProjectIdsState,
   dialogState,
-  luFilesState,
+  luFilesSelectorFamily,
 } from '../../../src/recoilModel';
 
 const state = {
@@ -63,7 +63,7 @@ describe('Root Bot External Service', () => {
       set(dialogState({ projectId: state.projectId, dialogId: state.dialogs[0].id }), state.dialogs[0]);
       set(dialogState({ projectId: state.projectId, dialogId: state.dialogs[1].id }), state.dialogs[1]);
       set(botProjectIdsState, state.botProjectIdsState);
-      set(luFilesState(state.projectId), state.luFiles);
+      set(luFilesSelectorFamily(state.projectId), state.luFiles);
       set(projectMetaDataState(state.projectId), state.projectMetaDataState);
       set(settingsState(state.projectId), state.settings);
       set(dispatcherState, {

Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx

@@ -14,7 +14,7 @@ import {
   formDialogSchemaIdsState,
   jsonSchemaFilesState,
   lgFilesSelectorFamily,
-  luFilesState,
+  luFilesSelectorFamily,
   schemasState,
   settingsState,
 } from '../../../../src/recoilModel';
@@ -110,7 +110,7 @@ describe('<DiagnosticList/>', () => {
     set(currentProjectIdState, state.projectId);
     set(botProjectIdsState, [state.projectId]);
     set(dialogIdsState(state.projectId), []);
-    set(luFilesState(state.projectId), state.luFiles);
+    set(luFilesSelectorFamily(state.projectId), state.luFiles);
     set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
     set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
     set(botDiagnosticsState(state.projectId), state.diagnostics);

Composer/packages/client/__tests__/pages/design/useAssetsParsingState.test.tsx

@@ -0,0 +1,92 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { renderHook } from '@botframework-composer/test-utils/lib/hooks';
+import * as React from 'react';
+import { useSetRecoilState } from 'recoil';
+import { RecoilRoot } from 'recoil';
+import { act } from '@botframework-composer/test-utils/lib/hooks';
+
+import { useAssetsParsingState } from '../../../src/pages/design/useAssetsParsingState';
+import {
+  currentProjectIdState,
+  designPageLocationState,
+  lgFileState,
+  localeState,
+  luFileState,
+  qnaFileState,
+} from '../../../src/recoilModel';
+
+const state = {
+  luFiles: [
+    {
+      id: 'test.en-us',
+      isContentUnparsed: false,
+    },
+  ],
+  lgFiles: [
+    {
+      id: 'test.en-us',
+      isContentUnparsed: false,
+    },
+  ],
+  qnaFiles: [
+    {
+      id: 'test.en-us',
+      isContentUnparsed: false,
+    },
+  ],
+  focusPath: '',
+  locale: 'en-us',
+  projectId: 'test',
+};
+
+const useRecoilTestHook = (projectId: string) => {
+  const setLuFile = useSetRecoilState(luFileState({ projectId, luFileId: 'test.en-us' }));
+  const isParsing = useAssetsParsingState(state.projectId);
+
+  return { setLuFile, isParsing };
+};
+
+describe('useAssetsParsingState', () => {
+  let result;
+  beforeEach(() => {
+    const initRecoilState = ({ set }) => {
+      set(designPageLocationState(state.projectId), { dialogId: 'test' });
+      set(currentProjectIdState, state.projectId);
+      set(localeState(state.projectId), 'en-us');
+      set(luFileState({ projectId: state.projectId, luFileId: 'test.en-us' }), state.luFiles);
+      set(lgFileState({ projectId: state.projectId, lgFileId: 'test.en-us' }), state.luFiles);
+      set(qnaFileState({ projectId: state.projectId, qnaFileId: 'test.en-us' }), state.luFiles);
+    };
+
+    const wrapper = (props: { children?: React.ReactNode }) => {
+      const { children } = props;
+      return <RecoilRoot initializeState={initRecoilState}>{children}</RecoilRoot>;
+    };
+
+    const rendered = renderHook(() => useRecoilTestHook(state.projectId), {
+      wrapper,
+    });
+    result = rendered.result;
+  });
+
+  it('should be true if the file content is unparsed', async () => {
+    const { setLuFile } = result.current;
+    expect(result.current.isParsing).toBeFalsy();
+    act(() => {
+      setLuFile({
+        id: 'test.en-us',
+        isContentUnparsed: true,
+      });
+    });
+    expect(result.current.isParsing).toBeTruthy();
+    act(() => {
+      setLuFile({
+        id: 'test.en-us',
+        isContentUnparsed: false,
+      });
+    });
+    expect(result.current.isParsing).toBeFalsy();
+  });
+});

Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx

@@ -10,7 +10,7 @@ import { renderWithRecoil } from '../../testUtils';
 import {
   localeState,
   dialogsSelectorFamily,
-  qnaFilesState,
+  qnaFilesSelectorFamily,
   settingsState,
   schemasState,
   dispatcherState,
@@ -59,7 +59,7 @@ const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
   set(dialogsSelectorFamily(state.projectId), state.dialogs);
-  set(qnaFilesState(state.projectId), state.qnaFiles);
+  set(qnaFilesSelectorFamily(state.projectId), state.qnaFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);
   set(dispatcherState, {

Composer/packages/client/__tests__/pages/language-understanding/LUPage.test.tsx

@@ -10,7 +10,7 @@ import { renderWithRecoil } from '../../testUtils';
 import {
   localeState,
   dialogsSelectorFamily,
-  luFilesState,
+  luFilesSelectorFamily,
   settingsState,
   schemasState,
   currentProjectIdState,
@@ -50,7 +50,7 @@ const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
   set(dialogsSelectorFamily(state.projectId), state.dialogs);
-  set(luFilesState(state.projectId), state.luFiles);
+  set(luFilesSelectorFamily(state.projectId), state.luFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);
 };

Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx

@@ -13,7 +13,7 @@ import {
   formDialogSchemaIdsState,
   jsonSchemaFilesState,
   lgFilesSelectorFamily,
-  luFilesState,
+  luFilesSelectorFamily,
   schemasState,
   settingsState,
 } from '../../../src/recoilModel';
@@ -110,7 +110,7 @@ describe('<DiagnosticList/>', () => {
     set(currentProjectIdState, state.projectId);
     set(botProjectIdsState, [state.projectId]);
     set(dialogIdsState(state.projectId), []);
-    set(luFilesState(state.projectId), state.luFiles);
+    set(luFilesSelectorFamily(state.projectId), state.luFiles);
     set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
     set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
     set(botDiagnosticsState(state.projectId), state.diagnostics);

Composer/packages/client/__tests__/pages/notifications/diagnostics.test.tsx

@@ -14,8 +14,8 @@ import {
   formDialogSchemaIdsState,
   jsonSchemaFilesState,
   lgFilesSelectorFamily,
-  luFilesState,
-  qnaFilesState,
+  luFilesSelectorFamily,
+  qnaFilesSelectorFamily,
   schemasState,
   settingsState,
 } from '../../../src/recoilModel';
@@ -142,9 +142,9 @@ describe('<Diagnostics/>', () => {
     set(botProjectIdsState, [state.projectId]);
     set(dialogIdsState(state.projectId), ['test']);
     set(dialogState({ projectId: state.projectId, dialogId: 'test' }), state.dialogs[0]);
-    set(luFilesState(state.projectId), state.luFiles);
+    set(luFilesSelectorFamily(state.projectId), state.luFiles);
     set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
-    set(qnaFilesState(state.projectId), state.qnaFiles);
+    set(qnaFilesSelectorFamily(state.projectId), state.qnaFiles);
     set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
     set(botDiagnosticsState(state.projectId), state.diagnostics);
     set(settingsState(state.projectId), state.settings);

Composer/packages/client/__tests__/shell/luApi.test.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { RecoilRoot } from 'recoil';
 
 import { useLuApi } from '../../src/shell/luApi';
-import { localeState, luFilesState, dispatcherState, currentProjectIdState } from '../../src/recoilModel';
+import { localeState, luFilesSelectorFamily, dispatcherState, currentProjectIdState } from '../../src/recoilModel';
 import { Dispatcher } from '../../src/recoilModel/dispatchers';
 
 jest.mock('../../src/recoilModel/parsers/luWorker', () => {
@@ -34,7 +34,7 @@ describe('use luApi hooks', () => {
     const initRecoilState = ({ set }) => {
       set(currentProjectIdState, state.projectId);
       set(localeState(state.projectId), 'en-us');
-      set(luFilesState(state.projectId), state.luFiles);
+      set(luFilesSelectorFamily(state.projectId), state.luFiles);
       set(dispatcherState, (current: Dispatcher) => ({
         ...current,
         updateLuFile: updateLuFileMockMock,

Composer/packages/client/__tests__/shell/triggerApi.test.tsx

@@ -8,7 +8,7 @@ import { RecoilRoot } from 'recoil';
 import { useTriggerApi } from '../../src/shell/triggerApi';
 import {
   localeState,
-  luFilesState,
+  luFilesSelectorFamily,
   lgFilesSelectorFamily,
   dialogsSelectorFamily,
   schemasState,
@@ -52,7 +52,7 @@ describe('use triggerApi hooks', () => {
     const initRecoilState = ({ set }) => {
       set(currentProjectIdState, state.projectId);
       set(localeState(state.projectId), 'en-us');
-      set(luFilesState(state.projectId), state.luFiles);
+      set(luFilesSelectorFamily(state.projectId), state.luFiles);
       set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
       set(dialogsSelectorFamily(state.projectId), state.dialogs);
       set(schemasState(state.projectId), state.schemas);

Composer/packages/client/src/components/BotRuntimeController/publishDialog.tsx

@@ -22,7 +22,7 @@ import { Text, Tips, Links, nameRegex, LUIS_REGIONS } from '../../constants';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { getReferredQnaFiles } from '../../utils/qnaUtil';
 import { getLuisBuildLuFiles } from '../../utils/luUtil';
-import { luFilesState, qnaFilesState, dialogsSelectorFamily } from '../../recoilModel';
+import { luFilesSelectorFamily, qnaFilesSelectorFamily, dialogsSelectorFamily } from '../../recoilModel';
 
 // -------------------- Styles -------------------- //
 const textFieldLabel = css`
@@ -91,8 +91,8 @@ interface IPublishDialogProps {
 export const PublishDialog: React.FC<IPublishDialogProps> = (props) => {
   const { isOpen, onDismiss, onPublish, botName, config, projectId } = props;
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
-  const luFiles = useRecoilValue(luFilesState(projectId));
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
+  const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
   const qnaConfigShow = getReferredQnaFiles(qnaFiles, dialogs).length > 0;
   const luConfigShow = getLuisBuildLuFiles(luFiles, dialogs).length > 0;
 

Composer/packages/client/src/components/TriggerCreationModal/TriggerCreationModal.tsx

@@ -12,7 +12,7 @@ import { useRecoilValue } from 'recoil';
 
 import { TriggerFormData, TriggerFormDataErrors } from '../../utils/dialogUtil';
 import { userSettingsState } from '../../recoilModel/atoms';
-import { currentDialogState, dialogsSelectorFamily, localeState, luFilesState } from '../../recoilModel';
+import { currentDialogState, dialogsSelectorFamily, localeState, luFilesSelectorFamily } from '../../recoilModel';
 import { isRegExRecognizerType, resolveRecognizer$kind } from '../../utils/dialogValidator';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
@@ -50,7 +50,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props)
   const isRegEx = isRegExRecognizerType(dialogFile);
   const regexIntents = (dialogFile?.content?.recognizer as RegexRecognizer)?.intents ?? [];
 
-  const luFiles = useRecoilValue(luFilesState(projectId));
+  const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
   const locale = useRecoilValue(localeState(projectId));
   const currentDialog = useRecoilValue(currentDialogState({ projectId, dialogId }));
   const luFile = luFiles.find((f) => f.id === `${currentDialog?.id}.${locale}`);

Composer/packages/client/src/hooks/useResolver.ts

@@ -4,15 +4,15 @@ import { useRef } from 'react';
 import { lgImportResolverGenerator } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 
-import { dialogsSelectorFamily, luFilesState, localeState, qnaFilesState } from '../recoilModel';
+import { dialogsSelectorFamily, luFilesSelectorFamily, localeState, qnaFilesSelectorFamily } from '../recoilModel';
 import { lgFilesSelectorFamily } from '../recoilModel/selectors/lg';
 
 export const useResolvers = (projectId: string) => {
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
-  const luFiles = useRecoilValue(luFilesState(projectId));
+  const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
   const lgFiles = useRecoilValue(lgFilesSelectorFamily(projectId));
   const locale = useRecoilValue(localeState(projectId));
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
 
   const lgFilesRef = useRef(lgFiles);
   lgFilesRef.current = lgFiles;

Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx

@@ -20,8 +20,8 @@ import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 import {
   dispatcherState,
   settingsState,
-  luFilesState,
-  qnaFilesState,
+  luFilesSelectorFamily,
+  qnaFilesSelectorFamily,
   botDisplayNameState,
   dialogsWithLuProviderSelectorFamily,
 } from '../../recoilModel';
@@ -167,8 +167,8 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
   const rootqnaKey = groupQnAKey.root;
 
   const dialogs = useRecoilValue(dialogsWithLuProviderSelectorFamily(projectId));
-  const luFiles = useRecoilValue(luFilesState(projectId));
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
+  const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const isLUISKeyNeeded = BotIndexer.shouldUseLuis(dialogs, luFiles);
   const isQnAKeyNeeded = BotIndexer.shouldUseQnA(dialogs, qnaFiles);

Composer/packages/client/src/pages/botProject/SkillBotExternalService.tsx

@@ -14,8 +14,8 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import {
   dispatcherState,
   settingsState,
-  luFilesState,
-  qnaFilesState,
+  luFilesSelectorFamily,
+  qnaFilesSelectorFamily,
   dialogsSelectorFamily,
   botDisplayNameState,
 } from '../../recoilModel';
@@ -66,8 +66,8 @@ export const SkillBotExternalService: React.FC<SkillBotExternalServiceProps> = (
   const skillQnAKey = groupQnAKey[projectId];
 
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
-  const luFiles = useRecoilValue(luFilesState(projectId));
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
+  const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
 
   const isLUISKeyNeeded = BotIndexer.shouldUseLuis(dialogs, luFiles);
   const isQnAKeyNeeded = BotIndexer.shouldUseQnA(dialogs, qnaFiles);

Composer/packages/client/src/pages/design/Modals.tsx

@@ -15,7 +15,7 @@ import {
   schemasState,
   showCreateDialogModalState,
   localeState,
-  qnaFilesState,
+  qnaFilesSelectorFamily,
   displaySkillManifestState,
   brokenSkillInfoState,
   brokenSkillRepairCallbackState,
@@ -42,7 +42,7 @@ type ModalsProps = {
   projectId: string;
 };
 const Modals: React.FC<ModalsProps> = ({ projectId = '' }) => {
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
   const schemas = useRecoilValue(schemasState(projectId));
 
   const displaySkillManifestNameIdentifier = useRecoilValue(displaySkillManifestState);