feat(search): add SearchLayout component and wrap SearchSongPage in Suspense for loading state

Author: tomast1337

apps/frontend/src/app/(content)/search/layout.tsx

@@ -0,0 +1,10 @@
+export const dynamic = 'force-dynamic';
+export const revalidate = 0;
+
+export default function SearchLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

apps/frontend/src/app/(content)/search/page.tsx

@@ -12,7 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Image from 'next/image';
 import Link from 'next/link';
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
-import { useEffect, useMemo, useState } from 'react';
+import { Suspense, useEffect, useMemo, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import { create } from 'zustand';
 
@@ -627,4 +627,12 @@ const SearchSongPage = () => {
   );
 };
 
-export default SearchSongPage;
+const SearchPageWrapper = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SearchSongPage />
+    </Suspense>
+  );
+};
+
+export default SearchPageWrapper;