perf: optimize application performance

[bhavana-career]

Summary

This PR improves application performance by reducing unnecessary work during the initial load and optimizing rendering.

Changes

• Removed the artificial 1.5-second loading delay and SkeletonCard from the landing page.
• Replaced static imports of heavy visualization components with dynamic imports using next/dynamic for code splitting.
• Memoized StepAnimator with React.memo to avoid unnecessary re-renders when its props remain unchanged.
• Fixed two TypeScript definitions (modeOfOperation and INVALID_INPUT) required for a successful production build.

Verification

• Ran npm run build successfully.
• Verified the application runs correctly with npm run dev.
• Tested the landing page after removing the artificial loading delay.
• Verified multiple cipher visualizers (including Caesar, Playfair, Rail Fence, and DH) continue to function correctly.
• Confirmed no functional regressions during manual testing.

Expected Impact

• Faster initial rendering of the landing page.
• Reduced JavaScript loaded for visualization routes through dynamic imports.
• Fewer unnecessary React re-renders in the step animation component.
• Successful production build with strict TypeScript checks.

Summary by CodeRabbit

• New Features
  • Added support for displaying additional cipher metadata, including cipher mode information.
  • Expanded the typed cipher error system with an INVALID_INPUT case.
• Bug Fixes
  • Simplified the home page loading flow so the Categories section renders immediately without skeleton placeholders.
• Performance / UI
  • Improved cipher UI loading by lazy-loading several visualization tools on the client.
  • Reduced unnecessary re-renders by memoizing the step animation component.

[vercel]

@bhavana-career is attempting to deploy a commit to the csxark's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 00655be8-56c0-42e7-8343-59238715b40b

📥 Commits

Reviewing files that changed from the base of the PR and between 0e064f1 and b7e3ba4.

📒 Files selected for processing (1)

• components/cipher/CipherLayout.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• components/cipher/CipherLayout.tsx

---

📝 Walkthrough

Walkthrough

This PR removes homepage skeleton loading, lazy-loads cipher visualizer components, memoizes StepAnimator, and extends cipher metadata and error code types.

Changes

Homepage loading removal

Layer / File(s)	Summary
Remove skeleton loading logic app/page.tsx	Removes useEffect/useState loading state and SkeletonCard placeholders, rendering categories.map(...) unconditionally.

Cipher component and type updates

Layer / File(s)	Summary
Lazy-load cipher visualizers components/cipher/CipherLayout.tsx	Replaces static imports of PlayfairGrid, RailFenceViz, and DHVisualizer with next/dynamic imports with SSR disabled.
Memoize StepAnimator components/cipher/StepAnimator.tsx	Wraps StepAnimator in React.memo, updates the React import, and relocates the default export.
Extend cipher types lib/cipher/types.ts, lib/utils/errors.ts	Adds optional modeOfOperation to CipherMetadata and INVALID_INPUT to CipherErrorCode.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• csxark/CryptoViz#26: Both PRs touch the homepage (app/page.tsx) around the Typewriter hero headline integration.
• csxark/CryptoViz#66: Both PRs change the homepage Categories Grid loading behavior and SkeletonCard usage.

Suggested labels: ECSoC26, ECSoC26-L2

Suggested reviewers: csxark

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main goal of improving performance across the app, though it is broad.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

components/cipher/CipherLayout.tsx (1)

9-11: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value

Dynamic imports look correct and prop contracts align.

The next/dynamic imports with { ssr: false } are syntactically correct for Next.js 16. Cross-referencing the upstream component definitions confirms the prop shapes match: PlayfairGrid receives { matrix, highlights }, RailFenceViz receives { matrix, highlight }, and DHVisualizer receives { currentStep } — all consistent with the usage at lines 192, 196, and 200.

One optional consideration: no loading fallback is provided, so null renders during the async chunk load. Since these components are only rendered when result and steps already exist, the gap is likely negligible, but adding a lightweight placeholder (e.g., a spinner or skeleton) would prevent any brief flash of empty content.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/cipher/CipherLayout.tsx` around lines 9 - 11, Add a lightweight
loading fallback to the `dynamic` imports in `CipherLayout` so `PlayfairGrid`,
`RailFenceViz`, and `DHVisualizer` don’t render empty content while their chunks
load. Update the `next/dynamic` calls for those three components to include a
`loading` placeholder, keeping the existing `{ ssr: false }` behavior and the
current prop usage unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@components/cipher/CipherLayout.tsx`:
- Around line 9-11: Add a lightweight loading fallback to the `dynamic` imports
in `CipherLayout` so `PlayfairGrid`, `RailFenceViz`, and `DHVisualizer` don’t
render empty content while their chunks load. Update the `next/dynamic` calls
for those three components to include a `loading` placeholder, keeping the
existing `{ ssr: false }` behavior and the current prop usage unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ff6042d5-be92-4b0f-829f-e2cd84a74eb5

📥 Commits

Reviewing files that changed from the base of the PR and between 245e776 and 0e064f1.

📒 Files selected for processing (5)

• app/page.tsx
• components/cipher/CipherLayout.tsx
• components/cipher/StepAnimator.tsx
• lib/cipher/types.ts
• lib/utils/errors.ts

[csxark]

Great work @bhavana-career, and thank you for your contribution! 🎉I've reviewed the changes, and everything looks good. The requested fixes have been addressed correctly, and the implementation aligns well with the requirements. This is ready to be merged. Looking forward to your future contributions!