diff --git a/website/src/lib/logic/file-state.ts b/website/src/lib/logic/file-state.ts
index 77e09aa1a..57ab0c0bd 100644
--- a/website/src/lib/logic/file-state.ts
+++ b/website/src/lib/logic/file-state.ts
@@ -56,43 +56,51 @@ export class GPXFileStateCollection {
         this._files = writable(new Map());
     }
 
-    connectToDatabase(db: Database) {
-        if (this._subscription) return;
-        this._subscription = liveQuery(() => db.fileids.toArray()).subscribe((dbFileIds) => {
-            const currentFiles = get(this._files);
-            // Find new files to observe
-            let newFiles = dbFileIds
-                .filter((id) => !currentFiles.has(id))
-                .sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
-            // Find deleted files to stop observing
-            let deletedFiles = Array.from(currentFiles.keys()).filter(
-                (id) => !dbFileIds.find((fileId) => fileId === id)
-            );
-
-            if (newFiles.length > 0 || deletedFiles.length > 0) {
-                // Update the map of file states
-                this._files.update(($files) => {
-                    newFiles.forEach((id) => {
-                        const fileState = new GPXFileState(id);
-                        fileState.connectToDatabase(db);
-                        $files.set(id, fileState);
-                    });
-                    deletedFiles.forEach((id) => {
-                        $files.get(id)?.destroy();
-                        $files.delete(id);
-                    });
-                    return $files;
-                });
-
-                // Update the file order
-                let fileOrder = get(settings.fileOrder).filter((id) => !deletedFiles.includes(id));
-                newFiles.forEach((id) => {
-                    if (!fileOrder.includes(id)) {
-                        fileOrder.push(id);
-                    }
-                });
-                settings.fileOrder.set(fileOrder);
+    connectToDatabase(db: Database): Promise<void> {
+        return new Promise((resolve) => {
+            if (this._subscription) {
+                resolve();
+                return;
             }
+            this._subscription = liveQuery(() => db.fileids.toArray()).subscribe((dbFileIds) => {
+                const currentFiles = get(this._files);
+                // Find new files to observe
+                let newFiles = dbFileIds
+                    .filter((id) => !currentFiles.has(id))
+                    .sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
+                // Find deleted files to stop observing
+                let deletedFiles = Array.from(currentFiles.keys()).filter(
+                    (id) => !dbFileIds.find((fileId) => fileId === id)
+                );
+
+                if (newFiles.length > 0 || deletedFiles.length > 0) {
+                    // Update the map of file states
+                    this._files.update(($files) => {
+                        newFiles.forEach((id) => {
+                            const fileState = new GPXFileState(id);
+                            fileState.connectToDatabase(db);
+                            $files.set(id, fileState);
+                        });
+                        deletedFiles.forEach((id) => {
+                            $files.get(id)?.destroy();
+                            $files.delete(id);
+                        });
+                        return $files;
+                    });
+
+                    // Update the file order
+                    let fileOrder = get(settings.fileOrder).filter(
+                        (id) => !deletedFiles.includes(id)
+                    );
+                    newFiles.forEach((id) => {
+                        if (!fileOrder.includes(id)) {
+                            fileOrder.push(id);
+                        }
+                    });
+                    settings.fileOrder.set(fileOrder);
+                }
+                resolve();
+            });
         });
     }
 
diff --git a/website/src/routes/[[language]]/app/+page.svelte b/website/src/routes/[[language]]/app/+page.svelte
index 241824b46..d62310624 100644
--- a/website/src/routes/[[language]]/app/+page.svelte
+++ b/website/src/routes/[[language]]/app/+page.svelte
@@ -32,28 +32,28 @@
         elevationFill,
     } = settings;
 
-    onMount(() => {
-        let files: string[] = JSON.parse(page.url.searchParams.get('files') || '[]');
-        let ids: string[] = JSON.parse(page.url.searchParams.get('ids') || '[]');
-        let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
-
-        if (urls.length > 0) {
-            let downloads: Promise<File | null>[] = [];
-            urls.forEach((url) => {
-                downloads.push(
-                    fetch(url)
-                        .then((response) => response.blob())
-                        .then((blob) => new File([blob], url.split('/').pop() ?? ''))
-                );
-            });
-
-            Promise.all(downloads).then((files) => {
-                loadFiles(files.filter((file) => file !== null));
-            });
-        }
-
+    onMount(async () => {
         settings.connectToDatabase(db);
-        fileStateCollection.connectToDatabase(db);
+        fileStateCollection.connectToDatabase(db).then(() => {
+            let files: string[] = JSON.parse(page.url.searchParams.get('files') || '[]');
+            let ids: string[] = JSON.parse(page.url.searchParams.get('ids') || '[]');
+            let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
+
+            if (urls.length > 0) {
+                let downloads: Promise<File | null>[] = [];
+                urls.forEach((url) => {
+                    downloads.push(
+                        fetch(url)
+                            .then((response) => response.blob())
+                            .then((blob) => new File([blob], url.split('/').pop() ?? ''))
+                    );
+                });
+
+                Promise.all(downloads).then((files) => {
+                    loadFiles(files.filter((file) => file !== null));
+                });
+            }
+        });
     });
 
     onDestroy(() => {