feat: compare page + model registry improvements (#5420)

* feat: compare page + model registry improvements

* fix: images on compare page

* Update bifrost/app/comparison/ComparisonContent.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update bifrost/app/comparison/ComparisonContent.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* [WIP] Address feedback on compare page improvements (#5422)

* Initial plan

* refactor: extract getProviderLogo to shared utility

Co-authored-by: H2Shami <46585994+H2Shami@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: H2Shami <46585994+H2Shami@users.noreply.github.com>

* add icons + address PR comments

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: 4 people

bifrost/app/comparison/ComparisonContent.tsx

@@ -1,5 +1,24 @@
+import { Suspense } from "react";
 import ComparisonContent from "./ComparisonContent";
 
+function ComparisonFallback() {
+  return (
+    <div className="min-h-screen bg-white px-4 py-4 flex flex-col items-center">
+      <div className="container mx-auto max-w-4xl pb-2 text-center">
+        <div className="h-[150px] w-[150px] mx-auto bg-gray-200 animate-pulse rounded" />
+      </div>
+      <div className="text-center max-w-3xl mx-auto">
+        <div className="h-10 bg-gray-200 animate-pulse rounded w-64 mx-auto mb-4" />
+        <div className="h-6 bg-gray-200 animate-pulse rounded w-96 mx-auto mb-6" />
+      </div>
+    </div>
+  );
+}
+
 export default function ComparisonIndexPage() {
-  return <ComparisonContent />;
+  return (
+    <Suspense fallback={<ComparisonFallback />}>
+      <ComparisonContent />
+    </Suspense>
+  );
 }