make it more clear what is new and when

src/components/OrganizationCard.tsx

@@ -198,13 +198,6 @@ const OrganizationCard: React.FC<OrganizationCardProps> = ({
             )}
           </div>
           
-          {/* Divider */}
-          <div className="border-t border-border/20 mb-3"></div>
-          
-          {/* Releases Past Year */}
-          <div className="text-xs text-muted-foreground italic">
-            <span className="font-bold text-foreground">{totalCount}</span> new repos in the last year
-          </div>
         </div>
       </div>
     </TooltipProvider>

src/components/ProviderHeatmapSkeleton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const ProviderHeatmapSkeleton: React.FC = () => {
+  return (
+    <div className="relative bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg p-6 animate-pulse">
+      <div className="mb-4">
+        <div className="text-center bg-muted/20 rounded-lg p-3 border border-border/30">
+          {/* Avatar & name */}
+          <div className="flex items-center justify-center gap-2 mb-2">
+            <div className="h-8 w-8 rounded-md bg-muted shadow-sm" />
+            <div className="h-4 w-24 bg-muted rounded" />
+          </div>
+
+          {/* Compact stats placeholders */}
+          <div className="flex flex-wrap justify-center gap-2 text-xs mb-3">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="h-4 w-16 bg-muted rounded" />
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-border/20 mb-3"></div>
+
+          {/* Releases past year placeholder */}
+          <div className="h-3 w-32 mx-auto bg-muted rounded" />
+        </div>
+      </div>
+
+      {/* Heatmap grid skeleton */}
+      <div className="flex flex-col items-center bg-muted/30 rounded-xl p-3">
+        <div
+          className="grid gap-1 w-full"
+          style={{ gridTemplateColumns: "repeat(52, minmax(0, 1fr))" }}
+        >
+          {Array.from({ length: 52 * 7 }).map((_, i) => (
+            <div key={i} className="h-3 bg-muted rounded" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProviderHeatmapSkeleton; 

src/pages/index.tsx

@@ -11,6 +11,7 @@ import { fetchAllProvidersData, fetchAllAuthorsData } from "../utils/authors";
 import UserSearchDialog from "../components/UserSearchDialog";
 import ProviderSummary from "../components/ProviderSummary";
 import OrganizationCard from "../components/OrganizationCard";
+import ProviderHeatmapSkeleton from "../components/ProviderHeatmapSkeleton";
 
 const PROVIDERS: ProviderInfo[] = [
   { color: "#ff7000", authors: ["mistralai"] },
@@ -86,6 +87,11 @@ const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: Prov
           showHeader={false}
         />
       </div>
+
+      {/* Releases Past Year placed under the heatmap */}
+      <div className="mt-3 text-xs text-muted-foreground italic text-center">
+        <span className="font-bold text-foreground">{totalCount}</span> new repos in the last year
+      </div>
     </div>
   );
 });
@@ -141,9 +147,10 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
       </div>
            
       {isLoading ? (
-        <div className="flex items-center justify-center py-20">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
-          <p className="ml-4 text-muted-foreground">Loading heatmaps...</p>
+        <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
+          {Array.from({ length: 3 }).map((_, idx) => (
+            <ProviderHeatmapSkeleton key={idx} />
+          ))}
         </div>
       ) : (
         <>