fix: compatibility engine should run even on initial state (#7366)

Author: ovflowd

apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx

@@ -30,9 +30,9 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
   // We parse the compatibility of the dropdown items
   const parsedOperatingSystems = useMemo(
     () => parseCompat(OPERATING_SYSTEMS, release),
-    // We only want to react on the change of the OS, Bitness, and Version
+    // We only want to react on the change of the Install Method
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [release.os, release.platform, release.version]
+    [release.installMethod, release.os]
   );
 
   return (

apps/site/components/Downloads/Release/PackageManagerDropdown.tsx

@@ -30,7 +30,7 @@ const PackageManagerDropdown: FC = () => {
       ),
     // We only want to react on the change of the Version
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [release.version]
+    [release.version, release.packageManager]
   );
 
   return (

apps/site/components/Downloads/Release/PlatformDropdown.tsx

@@ -40,7 +40,7 @@ const PlatformDropdown: FC = () => {
         : [],
     // We only want to react on the change of the OS, Platform, and Version
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [release.os, release.platform, release.version]
+    [release.os, release.version]
   );
 
   // We set the Platform to the next available Architecture when the current

apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx

@@ -30,7 +30,7 @@ const PrebuiltDownloadButtons: FC = () => {
     : '';
 
   return (
-    <div className="my-4 flex gap-2">
+    <div className="my-4 flex flex-wrap gap-2">
       <Skeleton
         loading={os === 'LOADING' || platform === ''}
         hide={OS_NOT_SUPPORTING_INSTALLERS.includes(os)}

apps/site/util/downloadUtils.tsx

@@ -42,9 +42,9 @@ export enum PackageManagerLabel {
 }
 
 type DownloadCompatibility = {
-  os: Array<UserOS>;
-  installMethod: Array<Types.InstallationMethod>;
-  platform: Array<UserPlatform>;
+  os: Array<UserOS | 'LOADING'>;
+  installMethod: Array<Types.InstallationMethod | ''>;
+  platform: Array<UserPlatform | ''>;
   semver: Array<string>;
   releases: Array<NodeReleaseStatus>;
 };
@@ -97,14 +97,13 @@ export const parseCompat = <
 ): Array<T> => {
   const satisfiesSemver = (semver: string) => satisfies(version, semver);
 
-  const supportsOS = (i: T['compatibility']) =>
-    os === 'LOADING' || (i.os?.includes(os) ?? true);
+  const supportsOS = (i: T['compatibility']) => i.os?.includes(os) ?? true;
 
   const supportsInstallMethod = (i: T['compatibility']) =>
-    (installMethod === '' || i.installMethod?.includes(installMethod)) ?? true;
+    i.installMethod?.includes(installMethod) ?? true;
 
   const supportsPlatform = (i: T['compatibility']) =>
-    platform === '' || (i.platform?.includes(platform) ?? true);
+    i.platform?.includes(platform) ?? true;
 
   const supportsVersion = (i: T['compatibility']) =>
     i.semver?.some(satisfiesSemver) ?? true;
@@ -145,7 +144,7 @@ export const OPERATING_SYSTEMS: Array<DownloadDropdownItem<UserOS>> = [
   {
     label: OperatingSystemLabel.AIX,
     value: 'AIX',
-    compatibility: { installMethod: [] },
+    compatibility: { installMethod: [''] },
     iconImage: <OSIcons.AIX width={16} height={16} />,
   },
 ];