Fix asset store display speed and reduce the burst of requests (#7241)

Author: AlexandreSi

newIDE/app/src/AssetStore/AssetCard.js

@@ -54,7 +54,11 @@ export const AssetCard = ({
     <div id={id} style={{ ...styles.cardContainer, width: size, height: size }}>
       <div style={{ ...styles.previewContainer, width: size, height: size }}>
         <CheckeredBackground />
-        <AssetPreviewImage assetShortHeader={assetShortHeader} maxSize={128} />
+        <AssetPreviewImage
+          assetShortHeader={assetShortHeader}
+          maxSize={128}
+          loading="lazy"
+        />
       </div>
       <div
         style={{

newIDE/app/src/AssetStore/AssetPreviewImage.js

@@ -28,9 +28,14 @@ const styles = {
 type Props = {|
   assetShortHeader: AssetShortHeader,
   maxSize?: number,
+  loading?: 'lazy',
 |};
 
-export const AssetPreviewImage = ({ assetShortHeader, maxSize }: Props) => {
+export const AssetPreviewImage = ({
+  assetShortHeader,
+  maxSize,
+  loading,
+}: Props) => {
   const previewImageUrl = assetShortHeader.previewImageUrls[0];
   const isPrivate = isPrivateAsset(assetShortHeader);
   const [isLoaded, setIsLoaded] = React.useState(false);
@@ -55,6 +60,7 @@ export const AssetPreviewImage = ({ assetShortHeader, maxSize }: Props) => {
       url={previewImageUrl}
       alt={assetShortHeader.name}
       onLoad={onLoad}
+      loading={loading}
     />
   ) : (
     <CorsAwareImage
@@ -63,6 +69,7 @@ export const AssetPreviewImage = ({ assetShortHeader, maxSize }: Props) => {
       src={previewImageUrl}
       alt={assetShortHeader.name}
       onLoad={onLoad}
+      loading={loading}
     />
   );
 };

newIDE/app/src/AssetStore/AssetsList.js

@@ -53,7 +53,7 @@ import HelpIcon from '../UI/HelpIcon';
 import { OwnedProductLicense } from './ProductLicense/ProductLicenseOptions';
 import { getUserProductPurchaseUsageType } from './ProductPageHelper';
 
-const ASSETS_DISPLAY_LIMIT = 250;
+const ASSETS_DISPLAY_LIMIT = 60;
 
 const getAssetSize = (windowSize: WindowSizeType) => {
   switch (windowSize) {
@@ -338,7 +338,7 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
         scrollViewElement.scrollToPosition(y);
       },
       setPageBreakIndex: (index: number) => {
-        setPageBreakIndex(0);
+        setPageBreakIndex(index);
       },
     }));
 
@@ -471,6 +471,8 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
         if (!assetShortHeaders) return null;
         // Don't show assets if filtering on asset packs.)
         if (hasAssetPackFiltersApplied && !openedAssetPack) return [];
+        const assetSize = getAssetSize(windowSize);
+        const margin = cellSpacing / 2;
 
         return getAssetShortHeadersToDisplay(
           assetShortHeaders,
@@ -480,9 +482,9 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
           <AssetCardTile
             assetShortHeader={assetShortHeader}
             onOpenDetails={() => onOpenDetails(assetShortHeader)}
-            size={getAssetSize(windowSize)}
+            size={assetSize}
             key={assetShortHeader.id}
-            margin={cellSpacing / 2}
+            margin={margin}
             hideShortDescription={!!hideDetails}
           />
         ));

newIDE/app/src/AssetStore/PrivateAssets/AuthorizedAssetImage.js

@@ -11,6 +11,7 @@ type Props = {|
   onError?: () => void,
   onLoad?: (e: any) => void,
   hideLoader?: boolean,
+  loading?: 'lazy',
 |};
 
 const AuthorizedAssetImage = ({
@@ -20,6 +21,7 @@ const AuthorizedAssetImage = ({
   onError,
   onLoad,
   hideLoader,
+  loading,
 }: Props) => {
   const [authorizedUrl, setAuthorizedUrl] = React.useState(null);
   const [isImageLoaded, setIsImageLoaded] = React.useState(false);
@@ -78,6 +80,7 @@ const AuthorizedAssetImage = ({
       <img
         alt={alt}
         src={authorizedUrl}
+        loading={loading}
         style={{
           ...style,
           // Use display none to load the image in the background, but not

newIDE/app/src/AssetStore/ShopTiles.js

@@ -244,6 +244,7 @@ export const PublicAssetPackTile = ({
           style={styles.previewImage}
           src={assetPack.thumbnailUrl}
           alt={`Preview image of asset pack ${assetPack.name}`}
+          loading="lazy"
         />
         <Column>
           <Line justifyContent="space-between" noMargin>
@@ -299,6 +300,7 @@ export const PrivateAssetPackTile = ({
             style={styles.previewImage}
             src={assetPackListingData.thumbnailUrls[0]}
             alt={`Preview image of asset pack ${assetPackListingData.name}`}
+            loading="lazy"
           />
           {assetPackListingData.redeemConditions && !owned && (
             <div style={styles.redeemableContainer}>
@@ -367,6 +369,7 @@ export const PromoBundleCard = ({
                   }}
                   src={productListingData.thumbnailUrls[0]}
                   alt={`Preview image of bundle ${productListingData.name}`}
+                  loading="lazy"
                 />
               </div>
               <Column expand alignItems="flex-start" justifyContent="center">
@@ -476,6 +479,7 @@ export const CategoryTile = ({
           }}
           src={imageSource}
           alt={imageAlt}
+          // No lazy loading because categories are the first seen tiles in the shop.
         />
         <Column>
           <Line justifyContent="center" noMargin>
@@ -527,6 +531,7 @@ export const PrivateGameTemplateTile = ({
           alt={`Preview image of game template ${
             privateGameTemplateListingData.name
           }`}
+          loading="lazy"
         />
         <div style={styles.priceTagContainer}>
           <ProductPriceTag
@@ -603,6 +608,7 @@ export const ExampleTile = ({
               style={styles.previewImage}
               src={thumbnailImgUrl}
               alt={`Preview image of example ${exampleShortHeader.name}`}
+              loading="lazy"
             />
           ) : (
             <EmptyMessage

newIDE/app/src/AssetStore/index.js

@@ -645,11 +645,11 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
             <Column expand useFullHeight noMargin>
               <SearchBar
                 placeholder={
-                  hideGameTemplates ? t`Search assets` : `Search the shop`
+                  hideGameTemplates ? t`Search assets` : t`Search the shop`
                 }
                 value={searchText}
                 onChange={(newValue: string) => {
-                  if (searchText === newValue) {
+                  if (searchText === newValue || newValue.length === 1) {
                     return;
                   }
                   setSearchText(newValue);

newIDE/app/src/UI/CorsAwareImage.js

@@ -10,6 +10,7 @@ type Props = {|
   title?: ?string,
   onError?: (?Error) => void,
   onLoad?: (e: any) => void,
+  loading?: 'lazy',
 |};
 
 const addSearchParameterToUrl = (

newIDE/app/src/UI/Search/UseSearchItem.js

@@ -289,8 +289,6 @@ export const useSearchItem = <SearchItem: SearchableItem>(
     [searchItemsById, getItemDescription]
   );
 
-  // Update the search results according to the items, search term
-  // chosen category and chosen filters.
   const searchApi = searchApiRef.current;
   React.useEffect(
     () => {
@@ -351,6 +349,8 @@ export const useSearchItem = <SearchItem: SearchableItem>(
         discardSearch = true;
       };
     },
+    // Update the search results according to the items, search term
+    // chosen category and chosen filters.
     [
       shuffledSearchItems,
       sortedSearchItems,