feat: implement Release Notes with Lazy Loading (#460)

src/app/release-notes/page.tsx

@@ -0,0 +1,19 @@
+import React, { lazy } from 'react';
+import LazyLoadingManager from '@/components/performance/LazyLoadingManager';
+
+const LazyReleaseNotes = lazy(() => import('@/components/shared/ReleaseNotes'));
+
+export default function ReleaseNotesPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <h1 className="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
+          What's New in TeachLink
+        </h1>
+        <LazyLoadingManager componentName="ReleaseNotes">
+          <LazyReleaseNotes />
+        </LazyLoadingManager>
+      </div>
+    </div>
+  );
+}

src/components/index.ts

@@ -22,3 +22,4 @@ export { BulkImporter } from './BulkImporter';
 export type { BulkImporterProps, TargetFieldDef } from './BulkImporter';
 export { Tooltip } from './ui/Tooltip';
 export type { TooltipProps, TooltipPlacement } from './ui/Tooltip';
+export * from './shared/ReleaseNotes';

src/components/shared/ReleaseNotes.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ReleaseNotes from './ReleaseNotes';
+
+describe('ReleaseNotes', () => {
+  it('renders loading state initially', () => {
+    render(<ReleaseNotes />);
+    expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+  });
+
+  it('renders release notes after loading', async () => {
+    render(<ReleaseNotes />);
+
+    // Wait for the component to finish "fetching" (500ms mock delay)
+    await waitFor(() => {
+      expect(screen.getByText('Release Notes')).toBeInTheDocument();
+    }, { timeout: 1000 });
+
+    expect(screen.getByText('v1.2.0')).toBeInTheDocument();
+    expect(screen.getByText('v1.1.0')).toBeInTheDocument();
+    expect(screen.getByText('Added Lazy Loading support')).toBeInTheDocument();
+  });
+});

src/components/shared/ReleaseNotes.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+
+export interface ReleaseNote {
+  version: string;
+  date: string;
+  changes: string[];
+}
+
+export const ReleaseNotes: React.FC = () => {
+  const [notes, setNotes] = useState<ReleaseNote[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate fetching release notes
+    const fetchNotes = async () => {
+      try {
+        // Mock data
+        const data: ReleaseNote[] = [
+          {
+            version: '1.2.0',
+            date: '2026-05-30',
+            changes: ['Added Lazy Loading support', 'Improved performance', 'Fixed bugs'],
+          },
+          {
+            version: '1.1.0',
+            date: '2026-05-15',
+            changes: ['Added Release Notes feature', 'Updated dependencies'],
+          },
+        ];
+
+        // Simulate network delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+        setNotes(data);
+      } catch (error) {
+        console.error('Failed to fetch release notes:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchNotes();
+  }, []);
+
+  if (loading) {
+    return <div className="p-4 animate-pulse bg-gray-100 dark:bg-gray-800 rounded-lg h-32" data-testid="loading-skeleton"></div>;
+  }
+
+  return (
+    <div className="release-notes space-y-4 p-4 border rounded-lg shadow-sm bg-white dark:bg-gray-900 dark:border-gray-700">
+      <h2 className="text-2xl font-bold mb-4">Release Notes</h2>
+      {notes.length === 0 ? (
+        <p>No release notes available.</p>
+      ) : (
+        <ul className="space-y-4">
+          {notes.map((note) => (
+            <li key={note.version} className="border-b pb-4 last:border-b-0 dark:border-gray-800">
+              <h3 className="text-lg font-semibold text-blue-600 dark:text-blue-400">
+                v{note.version} <span className="text-sm font-normal text-gray-500 dark:text-gray-400">({note.date})</span>
+              </h3>
+              <ul className="list-disc pl-5 mt-2 space-y-1">
+                {note.changes.map((change, idx) => (
+                  <li key={idx} className="text-gray-700 dark:text-gray-300">{change}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default ReleaseNotes;