fix(playlist): filters styling and reset filter when the id changes

src/components/Dropdown/Dropdown.module.scss

@@ -7,13 +7,13 @@ $select-arrow: variables.$white;
 $select-focus: theme.$primary-color;
 
 .dropdown {
+  height: 36px;
   position: relative;
   display: grid;
   align-items: center;
   width: 140px;
   margin-left: 24px;
   font-size: 1.25rem;
-  line-height: 1.1;
   background-color: rgba(0, 0, 0, 0.54);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 0.25em;
@@ -35,14 +35,14 @@ $select-focus: theme.$primary-color;
   .select {
     z-index: 1;
     width: 100%;
+    height: 36px;
     margin: 0;
     padding: 9px 24px 9px 9px;
     text-overflow: ellipsis;
     color: variables.$white;
     font-family: inherit;
     font-weight: 700;
     font-size: 1rem;
-    line-height: inherit;
     background: none;
     border: none;
     outline: none;

src/components/Filter/Filter.module.scss

@@ -11,9 +11,3 @@
     margin: 0 4px;
   }
 }
-
-.optionMobile {
-  @include responsive.mobile-only() {
-    display: none;
-  }
-}

src/components/Filter/Filter.tsx

@@ -56,7 +56,6 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, value
           value={value}
           onChange={handleChange}
           aria-label={t('filter_videos_by_genre')}
-          optionsStyle={styles.optionMobile}
         />
       )}
     </Fragment>

src/screens/Playlist/Playlist.module.scss

@@ -32,6 +32,7 @@
 
   display: flex;
   align-items: center;
+  height: 36px;
   margin: 24px 0;
 
   > h2 {

src/screens/Playlist/Playlist.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router-dom';
 import type { PlaylistItem } from 'types/playlist';
 import type { Config } from 'types/Config';
@@ -26,14 +26,19 @@ function Playlist({
 }: RouteComponentProps<PlaylistRouteParams>) {
   const history = useHistory();
   const config: Config = useContext(ConfigContext);
-  const { isLoading, error, data: { title, playlist } = { title: '', playlist: [] } } = usePlaylist(id);
+  const { isLoading, isPlaceholderData, error, data: { title, playlist } = { title: '', playlist: [] } } = usePlaylist(id);
 
   const [filter, setFilter] = useState<string>('');
 
   const categories = getFiltersFromConfig(config, id);
   const filteredPlaylist = useMemo(() => filterPlaylist(playlist, filter), [playlist, filter]);
   const updateBlurImage = useBlurImageUpdater(filteredPlaylist);
 
+  useEffect(() => {
+    // reset filter when the playlist id changes
+    setFilter('');
+  }, [id]);
+
   const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, id));
   const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
 
@@ -51,8 +56,8 @@ function Playlist({
         <meta name="twitter:title" content={pageTitle} />
       </Helmet>
       <header className={styles.header}>
-        <h2>{title}</h2>
-        <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />
+        <h2>{isLoading || isPlaceholderData ? 'Loading' : title}</h2>
+        {!isLoading && !isPlaceholderData && <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
       </header>
       <main className={styles.main}>
         <CardGrid