Animate sort toggle entrance

src/app/AppViewSwitcher.tsx

@@ -24,9 +24,12 @@ import { KEY_COMMANDS } from '@/photo/key-commands';
 import { useAppText } from '@/i18n/state/client';
 import IconSort from '@/components/icons/IconSort';
 import { getSortConfigFromPath } from '@/photo/db/sort-path';
+import { motion } from 'framer-motion';
 
 export type SwitcherSelection = 'feed' | 'grid' | 'admin';
 
+const GAP_CLASS = 'mr-1.5 sm:mr-2';
+
 export default function AppViewSwitcher({
   currentSelection,
   className,
@@ -112,13 +115,8 @@ export default function AppViewSwitcher({
     />;
 
   return (
-    <div
-      className={clsx(
-        'flex gap-1.5 sm:gap-2',
-        className,
-      )}
-    >
-      <Switcher>
+    <div className={clsx('flex', className)}>
+      <Switcher className={GAP_CLASS}>
         {GRID_HOMEPAGE_ENABLED ? renderItemGrid : renderItemFeed}
         {GRID_HOMEPAGE_ENABLED ? renderItemFeed : renderItemGrid}
         {/* Show spinner if admin is suspected to be logged in */}
@@ -150,6 +148,13 @@ export default function AppViewSwitcher({
           />}
       </Switcher>
       {showSortControl &&
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.5 }}
+          transition={{ duration: 0.3, ease: 'easeInOut' }}
+          className={GAP_CLASS}
+        >
           <Switcher className="max-sm:hidden">
             <SwitcherItem
               href={pathSort}
@@ -163,7 +168,9 @@ export default function AppViewSwitcher({
                   : 'View oldest first',
               }}
             />
-        </Switcher>}
+          </Switcher>
+        </motion.div>}
+      <motion.div layout>
         <Switcher type="borderless">
           <SwitcherItem
             icon={<IconSearch includeTitle={false} />}
@@ -175,6 +182,7 @@ export default function AppViewSwitcher({
             }}}
           />
         </Switcher>
+      </motion.div>
     </div>
   );
 }