Lazy load audio visualizer (#51)

samhirtarif · Jun 10, 2023 · 5694c7b · 5694c7b
1 parent 135871c
commit 5694c7b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-audio-voice-recorder",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "author": "",
   "repository": {

diff --git a/src/components/AudioRecordingComponent.tsx b/src/components/AudioRecordingComponent.tsx
@@ -1,7 +1,6 @@
-import React, { useState, useEffect, ReactElement } from "react";
+import React, { useState, useEffect, ReactElement, Suspense } from "react";
 import { Props } from "./interfaces";
 import useAudioRecorder from "../hooks/useAudioRecorder";
-import { LiveAudioVisualizer } from "react-audio-visualize";
 
 import micSVG from "../icons/mic.svg";
 import pauseSVG from "../icons/pause.svg";
@@ -10,6 +9,11 @@ import saveSVG from "../icons/save.svg";
 import discardSVG from "../icons/stop.svg";
 import "../styles/audio-recorder.css";
 
+const LiveAudioVisualizer = React.lazy(async () => {
+  const { LiveAudioVisualizer } = await import("react-audio-visualize");
+  return { default: LiveAudioVisualizer };
+});
+
 /**
  * Usage: https://github.com/samhirtarif/react-audio-recorder#audiorecorder-component
  *
@@ -117,17 +121,19 @@ const AudioRecorder: (props: Props) => ReactElement = ({
           }`}
         >
           {mediaRecorder && (
-            <LiveAudioVisualizer
-              mediaRecorder={mediaRecorder}
-              barWidth={2}
-              gap={2}
-              width={140}
-              height={30}
-              fftSize={512}
-              maxDecibels={-10}
-              minDecibels={-80}
-              smoothingTimeConstant={0.4}
-            />
+            <Suspense fallback={<></>}>
+              <LiveAudioVisualizer
+                mediaRecorder={mediaRecorder}
+                barWidth={2}
+                gap={2}
+                width={140}
+                height={30}
+                fftSize={512}
+                maxDecibels={-10}
+                minDecibels={-80}
+                smoothingTimeConstant={0.4}
+              />
+            </Suspense>
           )}
         </span>
       ) : (