rework view switch to use url param and add skeleton

lib/cookies.ts

@@ -15,7 +15,6 @@ export enum NAMES {
   MIXPANEL_DEBUG='_mixpanel_debug',
   ADDRESS_NFT_DISPLAY_TYPE='address_nft_display_type',
   UUID='uuid',
-  MARKETPLACE_DISPLAY_TYPE='marketplace_display_type',
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {

types/client/marketplace.ts

@@ -38,3 +38,8 @@ export enum ContractListTypes {
   ALL = 'All',
   VERIFIED = 'Verified',
 }
+
+export enum MarketplaceDisplayType {
+  DEFAULT = 'default',
+  SCORES = 'scores',
+}

ui/marketplace/useMarketplace.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { ContractListTypes } from 'types/client/marketplace';
-import { MarketplaceCategory } from 'types/client/marketplace';
+import { MarketplaceCategory, MarketplaceDisplayType } from 'types/client/marketplace';
 
 import useDebounce from 'lib/hooks/useDebounce';
 import * as mixpanel from 'lib/mixpanel/index';
@@ -26,9 +26,15 @@ export default function useMarketplace() {
   const router = useRouter();
   const defaultCategoryId = getQueryParamString(router.query.category);
   const defaultFilterQuery = getQueryParamString(router.query.filter);
+  const defaultDisplayType = getQueryParamString(router.query.view);
 
   const [ selectedAppId, setSelectedAppId ] = React.useState<string | null>(null);
   const [ selectedCategoryId, setSelectedCategoryId ] = React.useState<string>(MarketplaceCategory.ALL);
+  const [ selectedDisplayType, setSelectedDisplayType ] = React.useState<string>(
+    Object.values(MarketplaceDisplayType).includes(defaultDisplayType as MarketplaceDisplayType) ?
+      defaultDisplayType :
+      MarketplaceDisplayType.DEFAULT,
+  );
   const [ filterQuery, setFilterQuery ] = React.useState(defaultFilterQuery);
   const [ favoriteApps, setFavoriteApps ] = React.useState<Array<string>>([]);
   const [ isFavoriteAppsLoaded, setIsFavoriteAppsLoaded ] = React.useState<boolean>(false);
@@ -80,6 +86,10 @@ export default function useMarketplace() {
     setSelectedCategoryId(newCategory);
   }, []);
 
+  const handleDisplayTypeChange = React.useCallback((newView: MarketplaceDisplayType) => {
+    setSelectedDisplayType(newView);
+  }, []);
+
   const {
     isPlaceholderData, isError, error, data, displayedApps,
   } = useMarketplaceApps(debouncedFilterQuery, selectedCategoryId, favoriteApps, isFavoriteAppsLoaded);
@@ -101,10 +111,16 @@ export default function useMarketplace() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ isPlaceholderData ]);
 
+  // React.useEffect(() => {
+  //   const isValidDefaultDisplayType = Object.values(MarketplaceDisplayType).includes(defaultDisplayType as MarketplaceDisplayType);
+  //   isValidDefaultDisplayType && setSelectedDisplayType(defaultDisplayType);
+  // }, [ ]); // eslint-disable-line react-hooks/exhaustive-deps
+
   React.useEffect(() => {
     const query = _pickBy({
       category: selectedCategoryId === MarketplaceCategory.ALL ? undefined : selectedCategoryId,
       filter: debouncedFilterQuery,
+      view: selectedDisplayType === MarketplaceDisplayType.DEFAULT ? undefined : selectedDisplayType,
     }, Boolean);
 
     if (debouncedFilterQuery.length > 0) {
@@ -119,7 +135,7 @@ export default function useMarketplace() {
   // omit router in the deps because router.push() somehow modifies it
   // and we get infinite re-renders then
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ debouncedFilterQuery, selectedCategoryId ]);
+  }, [ debouncedFilterQuery, selectedCategoryId, selectedDisplayType ]);
 
   return React.useMemo(() => ({
     selectedCategoryId,
@@ -143,6 +159,8 @@ export default function useMarketplace() {
     isCategoriesPlaceholderData,
     showContractList,
     contractListModalType,
+    selectedDisplayType,
+    onDisplayTypeChange: handleDisplayTypeChange,
   }), [
     selectedCategoryId,
     categories,
@@ -164,5 +182,7 @@ export default function useMarketplace() {
     isCategoriesPlaceholderData,
     showContractList,
     contractListModalType,
+    selectedDisplayType,
+    handleDisplayTypeChange,
   ]);
 }

ui/pages/Marketplace.tsx

-import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton } from '@chakra-ui/react';
+import { Box, Menu, MenuButton, MenuItem, MenuList, Flex, IconButton, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
-import { MarketplaceCategory } from 'types/client/marketplace';
+import { MarketplaceCategory, MarketplaceDisplayType } from 'types/client/marketplace';
 import type { TabItem } from 'ui/shared/Tabs/types';
 
 import config from 'configs/app';
-import { useAppContext } from 'lib/contexts/app';
-import * as cookies from 'lib/cookies';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -46,8 +44,6 @@ if (feature.isEnabled) {
   }
 }
 
-type MarketplaceDisplayType = 'default' | 'scores';
-
 const Marketplace = () => {
   const {
     isPlaceholderData,
@@ -71,10 +67,12 @@ const Marketplace = () => {
     isCategoriesPlaceholderData,
     showContractList,
     contractListModalType,
+    selectedDisplayType,
+    onDisplayTypeChange,
   } = useMarketplace();
 
   const isMobile = useIsMobile();
-  const { value: isExperiment } = useFeatureValue('security_score_exp', false);
+  const { value: isExperiment } = useFeatureValue('security_score_exp', true);
 
   const categoryTabs = React.useMemo(() => {
     const tabs: Array<TabItem> = categories.map(category => ({
@@ -110,14 +108,6 @@ const Marketplace = () => {
     onCategoryChange(categoryTabs[index].id);
   }, [ categoryTabs, onCategoryChange ]);
 
-  const displayTypeCookie = cookies.get(cookies.NAMES.MARKETPLACE_DISPLAY_TYPE, useAppContext().cookies);
-  const [ displayType, setDisplayType ] = React.useState<MarketplaceDisplayType>(displayTypeCookie === 'default' ? 'default' : 'scores');
-
-  const handleNFTsDisplayTypeChange = React.useCallback((val: MarketplaceDisplayType) => {
-    cookies.set(cookies.NAMES.MARKETPLACE_DISPLAY_TYPE, val);
-    setDisplayType(val);
-  }, []);
-
   const handleAppClick = React.useCallback((event: MouseEvent, id: string) => {
     const isShown = window.localStorage.getItem('marketplace-disclaimer-shown');
     if (!isShown) {
@@ -184,41 +174,43 @@ const Marketplace = () => {
 
       <Flex direction={{ base: 'column', lg: 'row' }} mb={{ base: 4, lg: 6 }} gap={{ base: 4, lg: 3 }}>
         { isExperiment && (
-          <RadioButtonGroup<MarketplaceDisplayType>
-            onChange={ handleNFTsDisplayTypeChange }
-            defaultValue={ displayType }
-            name="type"
-            options={ [
-              {
-                title: 'Discovery',
-                value: 'default',
-                icon: 'apps_xs',
-                onlyIcon: false,
-              },
-              {
-                title: 'Apps scores',
-                value: 'scores',
-                icon: 'apps_list',
-                onlyIcon: false,
-                contentAfter: (
-                  <Flex
-                    alignItems="center"
-                    h={ 3 }
-                    bg="red.400"
-                    borderRadius="2px"
-                    fontSize="10px"
-                    fontWeight="500"
-                    color="white"
-                    px="2px"
-                    ml={ 1 }
-                  >
-                    { isMobile ? <IconSvg name="beta" boxSize={ 2 }/> : 'beta' }
-                  </Flex>
-                ),
-              },
-            ] }
-            autoWidth
-          />
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <RadioButtonGroup<MarketplaceDisplayType>
+              onChange={ onDisplayTypeChange }
+              defaultValue={ selectedDisplayType }
+              name="type"
+              options={ [
+                {
+                  title: 'Discovery',
+                  value: MarketplaceDisplayType.DEFAULT,
+                  icon: 'apps_xs',
+                  onlyIcon: false,
+                },
+                {
+                  title: 'Apps scores',
+                  value: MarketplaceDisplayType.SCORES,
+                  icon: 'apps_list',
+                  onlyIcon: false,
+                  contentAfter: (
+                    <Flex
+                      alignItems="center"
+                      h={ 3 }
+                      bg="red.400"
+                      borderRadius="2px"
+                      fontSize="10px"
+                      fontWeight="500"
+                      color="white"
+                      px="2px"
+                      ml={ 1 }
+                    >
+                      { isMobile ? <IconSvg name="beta" boxSize={ 2 }/> : 'beta' }
+                    </Flex>
+                  ),
+                },
+              ] }
+              autoWidth
+            />
+          </Skeleton>
         ) }
         <FilterInput
           initialValue={ filterQuery }
@@ -230,7 +222,7 @@ const Marketplace = () => {
         />
       </Flex>
 
-      { (displayType === 'scores' && isExperiment) ? (
+      { (selectedDisplayType === MarketplaceDisplayType.SCORES && isExperiment) ? (
         <MarketplaceListWithScores
           apps={ displayedApps }
           showAppInfo={ showAppInfo }