only show 200 fonts for speed

Author: SaraVieira

packages/app/package.json

@@ -72,7 +72,6 @@
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
-    "@samuelmeuli/font-manager": "^1.2.0",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
     "@svgr/core": "^2.4.1",

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx

@@ -12,15 +12,16 @@ export const FontList: FunctionComponent<Props> = ({
   activeFontFamily,
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
+  const usedFonts = fonts.slice(0, 200);
 
   const updateSearch = (e: any) => setSearchTerm(e.target.value);
 
   const getFonts: string[] = useMemo(
     () =>
-      fonts.filter(f =>
+      usedFonts.filter(f =>
         f.toLowerCase().includes(searchTerm.trim().toLowerCase())
       ),
-    [searchTerm]
+    [searchTerm, usedFonts]
   );
   return (
     <>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/index.tsx

@@ -30,8 +30,8 @@ export const FontPicker = ({ activeFontFamily = 'Open Sans', onChange }) => {
       >
         {activeFontFamily}
       </SelectedFont>
-      {expanded && (
-        <Portal>
+      <Portal>
+        {expanded && (
           <div
             style={{
               position: 'fixed',
@@ -50,8 +50,8 @@ export const FontPicker = ({ activeFontFamily = 'Open Sans', onChange }) => {
               />
             </OutsideClickHandler>
           </div>
-        </Portal>
-      )}
+        )}
+      </Portal>
     </>
   );
 };

yarn.lock

@@ -3079,13 +3079,6 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
-"@samuelmeuli/font-manager@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@samuelmeuli/font-manager/-/font-manager-1.2.0.tgz#ec9ec3dab4cbbd56ce2f579f332bbd7e3aa26894"
-  integrity sha512-ChNcTdVDL0OjXAMQYi8R9ScXvVZ3p32/4MupKbGksGtF1xPKKTM6vEo74XCBo7LEPQ+Eb+BiS9yD4B0Oo4/LQw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"