improve package README loading, fix dependencies order (#2121)

Author: Simek

bun.lock

@@ -38,7 +38,7 @@ export function Button({
       {isLink ? (
         <A
           href={href}
-          style={[tw`rounded font-sans`, isLink && containerStyle]}
+          style={[tw`rounded font-sans no-underline`, containerStyle]}
           {...(openInNewTab ? { target: '_blank' } : {})}
           {...rest}>
           <View focusable={false} style={buttonStyle} accessible={false}>

components/Button.tsx

@@ -57,9 +57,11 @@ export default function CollapsibleSection({ title, data }: Props) {
       </View>
       {!collapsed && (
         <View>
-          {Object.entries(data).map(([name, version]) => (
-            <DependencyRow key={`${sectionKey}-${name}`} name={name} version={version} />
-          ))}
+          {Object.entries(data)
+            .sort(([aName], [bName]) => aName.localeCompare(bName))
+            .map(([name, version]) => (
+              <DependencyRow key={`${sectionKey}-${name}`} name={name} version={version} />
+            ))}
         </View>
       )}
     </>

components/Package/CollapsibleSection.tsx

@@ -28,9 +28,11 @@ type Props = {
 
 export default function ReadmeBox({ packageName, githubUrl, isTemplate, loader = false }: Props) {
   const { data, error, isLoading } = useSWR(
-    isTemplate
-      ? `${githubUrl?.replace('github.com/', 'raw.githubusercontent.com/')}/HEAD/README.md`
-      : `https://unpkg.com/${packageName}/README.md`,
+    packageName
+      ? isTemplate
+        ? `${githubUrl?.replace('github.com/', 'raw.githubusercontent.com/')}/HEAD/README.md`
+        : `https://unpkg.com/${packageName}/README.md`
+      : null,
     (url: string) =>
       fetch(url).then(res => {
         if (res.status === 404) {
@@ -46,11 +48,7 @@ export default function ReadmeBox({ packageName, githubUrl, isTemplate, loader =
     }
   );
 
-  if (!githubUrl || !packageName) {
-    return null;
-  }
-
-  const readmeFallbackContent = getReadmeFallbackContent(data, isLoading, error);
+  const readmeFallbackContent = getReadmeFallbackContent(data, isLoading || loader, error);
 
   return (
     <View
@@ -61,7 +59,7 @@ export default function ReadmeBox({ packageName, githubUrl, isTemplate, loader =
         <P>Readme</P>
       </View>
       <View style={tw`p-4 pt-3 font-light`}>
-        {!data && readmeFallbackContent ? (
+        {(!data && readmeFallbackContent) || !githubUrl ? (
           <View style={tw`gap-4 py-6`}>
             {isLoading && <ThreeDotsLoader />}
             <P style={tw`text-center`}>{readmeFallbackContent}</P>

components/Package/ReadmeBox.tsx

@@ -26,7 +26,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-picker/picker": "^2.11.4",
-    "@sentry/react": "^10.33.0",
+    "@sentry/react": "^10.34.0",
     "crypto-js": "^4.2.0",
     "es-toolkit": "^1.43.0",
     "expo": "54.0.31",
@@ -56,7 +56,7 @@
     "@expo/next-adapter": "^6.0.0",
     "@next/bundle-analyzer": "^16.1.1",
     "@prettier/plugin-oxc": "^0.1.3",
-    "@types/bun": "^1.3.5",
+    "@types/bun": "^1.3.6",
     "@types/crypto-js": "^4.2.2",
     "@types/react": "^19.2.8",
     "@vercel/blob": "^0.27.3",

package.json

@@ -22,7 +22,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
   }
 
   res.statusCode = 200;
-  res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+  res.setHeader('Cache-Control', 'public, s-maxage=600, stale-while-revalidate=300');
   const result: CheckResultsType = {};
   packages.forEach(pkgName => {
     result[pkgName] = DATASET[pkgName];

pages/api/libraries/check.ts

@@ -111,7 +111,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
       : filteredLibraries;
   const filteredAndPaginatedLibraries = take(drop(relevanceSortedLibraries, offset), limit);
 
-  res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+  res.setHeader('Cache-Control', 'public, s-maxage=600, stale-while-revalidate=300');
 
   return res.json({
     libraries: filteredAndPaginatedLibraries,

pages/api/libraries/index.ts

@@ -6,7 +6,7 @@ import { getNewArchSupportStatus, NewArchSupportStatus } from '~/util/newArchSta
 
 const DATASET = data as DataAssetType;
 
-export default function handler(req: NextApiRequest, res: NextApiResponse) {
+export default function handler(_: NextApiRequest, res: NextApiResponse) {
   const result: StatisticResultType = {
     total: 0,
     newArchitecture: 0,
@@ -110,7 +110,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
   });
 
   res.setHeader('Content-Type', 'application/json');
-  res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
+  res.setHeader('Cache-Control', 'public, s-maxage=600, stale-while-revalidate=300');
   res.statusCode = 200;
 
   return res.json(result);