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/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/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);

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

@@ -17,9 +17,11 @@ import {
   skillNameIdentifierByProjectIdSelector,
 } from '../../recoilModel';
 import { undoVersionState } from '../../recoilModel/undo/history';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
 
 import { PropertyEditor } from './PropertyEditor';
 import { ManifestEditor } from './ManifestEditor';
+import useRawDataResourceChecker from './useRawDataResourceChecker';
 
 type PropertyViewProps = {
   projectId: string;
@@ -33,7 +35,7 @@ const PropertyPanel: React.FC<PropertyViewProps> = React.memo(({ projectId = '',
   const { isRemote: isRemoteSkill } = useRecoilValue(projectMetaDataState(projectId));
   const skillsByProjectId = useRecoilValue(skillNameIdentifierByProjectIdSelector);
   const skills = useRecoilValue(skillsStateSelector);
-
+  const loading = useRawDataResourceChecker(projectId);
   const skillManifestFile = useMemo(() => {
     if (!isSkill) return undefined;
 
@@ -51,7 +53,9 @@ const PropertyPanel: React.FC<PropertyViewProps> = React.memo(({ projectId = '',
 
   return (
     <EditorExtension plugins={pluginConfig} projectId={projectId} shell={shellForPropertyEditor}>
-      {isRemoteSkill && skillManifestFile ? (
+      {loading ? (
+        <LoadingSpinner />
+      ) : isRemoteSkill && skillManifestFile ? (
         <ManifestEditor formData={skillManifestFile} />
       ) : (
         <PropertyEditor key={focusPath + undoVersion} />

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

@@ -21,11 +21,13 @@ import {
 import { triggerNotSupported } from '../../utils/dialogValidator';
 import { decodeDesignerPathToArrayPath } from '../../utils/convertUtils/designerPathEncoder';
 import TelemetryClient from '../../telemetry/TelemetryClient';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
 
 import { WarningMessage } from './WarningMessage';
 import { visualPanel } from './styles';
 import VisualPanelHeader from './VisualPanelHeader';
 import VisualEditorWrapper from './VisualEditorWrapper';
+import useRawDataResourceChecker from './useRawDataResourceChecker';
 
 type VisualPanelProps = {
   projectId: string;
@@ -37,7 +39,7 @@ const VisualPanel: React.FC<VisualPanelProps> = React.memo(({ projectId }) => {
   const currentDialog = useRecoilValue(currentDialogState({ dialogId, projectId }));
   const schemas = useRecoilValue(schemasState(projectId));
   const { isRemote: isRemoteSkill } = useRecoilValue(projectMetaDataState(projectId));
-
+  const loading = useRawDataResourceChecker(projectId);
   const { updateDialog, navTo } = useRecoilValue(dispatcherState);
 
   const selected = decodeDesignerPathToArrayPath(currentDialog?.content, encodedSelected || '');
@@ -76,7 +78,9 @@ const VisualPanel: React.FC<VisualPanelProps> = React.memo(({ projectId }) => {
         />
       )}
 
-      {dialogJsonVisible && currentDialog ? (
+      {loading ? (
+        <LoadingSpinner />
+      ) : dialogJsonVisible && currentDialog ? (
         <JsonEditor
           key={'dialogjson'}
           editorSettings={userSettings.codeEditor}

Composer/packages/client/src/pages/design/exportSkillModal/index.tsx

@@ -15,10 +15,10 @@ import { SkillManifestFile } from '@bfc/shared';
 import {
   dispatcherState,
   skillManifestsState,
-  qnaFilesState,
+  qnaFilesSelectorFamily,
   dialogsSelectorFamily,
   dialogSchemasState,
-  luFilesState,
+  luFilesSelectorFamily,
 } from '../../../recoilModel';
 
 import { editorSteps, ManifestEditorSteps, order } from './constants';
@@ -35,8 +35,8 @@ interface ExportSkillModalProps {
 const ExportSkillModal: React.FC<ExportSkillModalProps> = ({ onSubmit, onDismiss: handleDismiss, projectId }) => {
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const dialogSchemas = useRecoilValue(dialogSchemasState(projectId));
-  const luFiles = useRecoilValue(luFilesState(projectId));
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
+  const luFiles = useRecoilValue(luFilesSelectorFamily(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesSelectorFamily(projectId));
   const skillManifests = useRecoilValue(skillManifestsState(projectId));
   const { updateSkillManifest } = useRecoilValue(dispatcherState);