improve startup time of CRDT projects (#1961)

* speed up project start up

* don't use the loading view, just display the project view and let it wait for the api to show be bound in and display skeletons while it's loading

Author: hahn-kev

backend/FwLite/LcmCrdt/FullTextSearch/EntrySearchService.cs

@@ -212,23 +212,17 @@ await EntrySearchRecordsTable
 
     public async Task RegenerateIfMissing()
     {
-        if (await QueryMissingEntries().AnyAsync())
+        if (await HasMissingEntries())
         {
             logger.LogWarning("Regenerating entry search table because it is missing entries. This may take a while.");
             await RegenerateEntrySearchTable();
         }
     }
 
-    public IAsyncEnumerable<Entry> EntriesMissingInSearchTable()
+    private async Task<bool> HasMissingEntries()
     {
-        return QueryMissingEntries()
-            .AsAsyncEnumerable();
-    }
-
-    private IQueryable<Entry> QueryMissingEntries()
-    {
-        return dbContext.Set<Entry>()
-            .Where(e => !EntrySearchRecords.Any(esr => esr.Id == e.Id));
+        //not using a query to check Ids because the Id on the search table isn't indexed so it will be slow
+        return await EntrySearchRecordsTable.CountAsync() != await dbContext.Set<Entry>().CountAsync();
     }
 
     private static EntrySearchRecord ToEntrySearchRecord(Entry entry, WritingSystem[] writingSystems)

backend/harmony

@@ -11,27 +11,27 @@
   import type {
     ISyncServiceJsInvokable
   } from '$lib/dotnet-types/generated-types/FwLiteShared/Services/ISyncServiceJsInvokable';
-  import ProjectLoader from './ProjectLoader.svelte';
   import {initProjectContext} from '$lib/project-context.svelte';
 
   const projectServicesProvider = useProjectServicesProvider();
-  const projectContext = initProjectContext();
 
   const {code, type: projectType, paratext = false}: {
     code: string; // Code for CRDTs, project-name for FWData
     type: 'fwdata' | 'crdt';
     paratext?: boolean;
   } = $props();
+  const projectContext = initProjectContext();
+  projectContext.projectCode = code;
 
 
 
   let projectName = $state<string>(code);
   let projectScope: IProjectScope;
   let serviceLoaded = $state(false);
-  let loading = $state(true);
   let destroyed = false;
   onMount(async () => {
     console.debug('ProjectView mounted');
+    projectContext.projectCode = code;
     if (projectType === 'crdt') {
       const maybeProjectName = await projectServicesProvider.tryGetCrdtProjectName(code);
       projectName = maybeProjectName ? maybeProjectName : code;
@@ -81,7 +81,7 @@
   }
 </script>
 
-<ProjectLoader readyToLoadProject={serviceLoaded} {loading} {projectName}>
-  <ProjectView onloaded={() => loading = false} data-paratext={paratext}></ProjectView>
-</ProjectLoader>
+
+<ProjectView data-paratext={paratext}/>
+
 

frontend/viewer/src/DotnetProjectView.svelte

@@ -3,10 +3,10 @@
   import type {HTMLAttributes} from 'svelte/elements';
 
   const {
-    onloaded,
+    onloaded = () => {},
     ...rest
   }: {
-    onloaded: (loaded: boolean) => void;
+    onloaded?: (loaded: boolean) => void;
   } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 

frontend/viewer/src/ProjectView.svelte

@@ -3,13 +3,17 @@
   import DeleteDialog from '$lib/entry-editor/DeleteDialog.svelte';
   import AudioDialog from './components/audio/AudioDialog.svelte';
   import {useDialogsService} from '$lib/services/dialogs-service';
+  import {useProjectContext} from '$lib/project-context.svelte';
+  const projectContext = useProjectContext();
   const dialogsService = useDialogsService();
   let deleteDialog = $state<DeleteDialog>();
   $effect(() => {
     dialogsService.invokeDeleteDialog = deleteDialog?.prompt;
   })
 </script>
 
-<NewEntryDialog/>
+{#if projectContext.maybeApi}
+  <NewEntryDialog/>
+  <AudioDialog/>
+{/if}
 <DeleteDialog bind:this={deleteDialog}/>
-<AudioDialog/>

frontend/viewer/src/lib/DialogsProvider.svelte

@@ -56,13 +56,25 @@ export class ProjectContext {
     return this.#api;
   }
   public get projectName(): string {
-    if (!this.#projectName) throw new Error('projectName not set');
+    if (!this.#projectName) return this.projectCode;
     return this.#projectName;
   }
   public get projectCode(): string {
     if (!this.#projectCode) throw new Error('projectCode not set');
     return this.#projectCode;
   }
+  public set projectCode(value: string) {
+    if (this.#projectCode === value) return;
+    if (this.#projectCode) {
+      if (import.meta.env.DEV) {
+        throw new Error('Cannot set projectCode after it is already set');
+      } else {
+        console.error('Cannot set projectCode after it is already set');
+        return;
+      }
+    }
+    this.#projectCode = value;
+  }
   public get projectType(): ProjectType {
     return this.#projectType;
   }

frontend/viewer/src/lib/project-context.svelte.ts

@@ -3,7 +3,6 @@
   import type {IQueryOptions} from '$lib/dotnet-types/generated-types/MiniLcm/IQueryOptions';
   import {SortField} from '$lib/dotnet-types/generated-types/MiniLcm/SortField';
   import {Debounced, resource, useDebounce} from 'runed';
-  import {useMiniLcmApi} from '$lib/services/service-provider';
   import EntryRow from './EntryRow.svelte';
   import Button from '$lib/components/ui/button/button.svelte';
   import {cn} from '$lib/utils';
@@ -18,6 +17,7 @@
   import type {SortConfig} from './SortMenu.svelte';
   import {AppNotification} from '$lib/notifications/notifications';
   import {Icon} from '$lib/components/ui/icon';
+  import {useProjectContext} from '$lib/project-context.svelte';
 
   const {
     search = '',
@@ -34,7 +34,8 @@
     gridifyFilter?: string;
     previewDictionary?: boolean
   } = $props();
-  const miniLcmApi = useMiniLcmApi();
+  const projectContext = useProjectContext();
+  const miniLcmApi = $derived(projectContext.maybeApi);
   const dialogsService = useDialogsService();
   const projectEventBus = useProjectEventBus();
 
@@ -61,9 +62,10 @@
     entriesResource.mutate(updatedEntries);
   }
 
-  let loadingUndebounced = $state(false);
+  let loadingUndebounced = $state(true);
   const loading = new Debounced(() => loadingUndebounced, 50);
   const fetchCurrentEntries = useDebounce(async (silent = false) => {
+    if (!miniLcmApi) return [];
     if (!silent) loadingUndebounced = true;
     try {
       const queryOptions: IQueryOptions = {
@@ -90,7 +92,7 @@
   }, 300);
 
   const entriesResource = resource(
-    () => ({ search, sort, gridifyFilter }),
+    () => ({ search, sort, gridifyFilter, miniLcmApi }),
     async () => await fetchCurrentEntries());
   const entries = $derived(entriesResource.current ?? []);