Multi-instance PGCR uses standard PGCR UI

src/app/multi/[multiId]/page.tsx

@@ -29,7 +29,10 @@ export default async function Page({ params }: PageProps) {
                 <h1 className="text-2xl font-bold">{multi.name}</h1>
             </div>
             <Suspense>
-                <MultiLoader instances={multi.instances.map(instance => instance.instanceId)} />
+                <MultiLoader
+                    multiId={params.multiId}
+                    instances={multi.instances.map(instance => instance.instanceId)}
+                />
             </Suspense>
         </PageWrapper>
     )

src/components/multi/multi-loader.tsx

@@ -1,9 +1,10 @@
 "use client"
 
+import PGCR from "~/components/pgcr/pgcr-view"
+import { mergeRaidHubInstances } from "~/lib/multi/merge-instances"
 import { useRaidHubInstanceList } from "~/services/raidhub/useRaidHubInstance"
-import { MultiInstanceCombinator } from "./multi-combinator"
 
-export const MultiLoader = ({ instances }: { instances: string[] }) => {
+export const MultiLoader = ({ multiId, instances }: { multiId: string; instances: string[] }) => {
     const queries = useRaidHubInstanceList(instances)
 
     const isLoading = queries.some(q => q.isLoading)
@@ -12,12 +13,10 @@ export const MultiLoader = ({ instances }: { instances: string[] }) => {
         const progress = 1 - queries.filter(q => q.isLoading).length / queries.length
         return (
             <div className="mt-2 flex w-full flex-col justify-center gap-1">
-                {/* Progress bar shows how many instances have finished loading for the user */}
                 <span className="text-primary mb-2 text-lg">
                     Loading data: {Math.round(progress * 100)}%
                 </span>
                 <div className="relative h-2 w-full rounded bg-gray-200">
-                    {/* The filled part represents the percentage of loaded instances */}
                     <div
                         className="bg-raidhub absolute top-0 left-0 h-2 rounded"
                         style={{ width: `${progress * 100}%` }}
@@ -26,5 +25,23 @@ export const MultiLoader = ({ instances }: { instances: string[] }) => {
             </div>
         )
     }
-    return <MultiInstanceCombinator data={queries.map(q => q.data!).filter(Boolean)} />
+
+    const loaded = queries.map(q => q.data).filter((d): d is NonNullable<typeof d> => !!d)
+    if (loaded.length === 0) {
+        return <p className="text-muted-foreground mt-4">Could not load instance data.</p>
+    }
+
+    const mergedMulti = loaded.length > 1
+    const { merged, timeline } = mergedMulti
+        ? mergeRaidHubInstances(loaded, multiId)
+        : { merged: loaded[0], timeline: undefined }
+
+    return (
+        <PGCR
+            data={merged}
+            sortScoreOptions={mergedMulti ? { capTPS: false } : undefined}
+            multiTimeline={mergedMulti ? timeline : undefined}
+            allowsReporting={!mergedMulti}
+        />
+    )
 }