Skip to content

Commit

Permalink
fix: add a loader before audio recording starts
Browse files Browse the repository at this point in the history
  • Loading branch information
anish-work committed Oct 29, 2024
1 parent 6b7d917 commit 9b7ebe6
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 5 deletions.
8 changes: 3 additions & 5 deletions src/components/shared/SpinLoader.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React from "react";

const SpinLoader: React.FC = () => {
const SpinLoader = ({ size = 50 }: { size?: number }) => {
const spinnerStyle = {
width: "50px",
height: "50px",
width: size + "px",
height: size + "px",
border: "2px solid #ccc",
borderTopColor: "transparent",
borderRadius: "50%",
Expand Down
11 changes: 11 additions & 0 deletions src/widgets/copilot/components/ChatInput/InlineAudioRecorder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import CircleUP from "src/assets/SvgIcons/CircleUP";
import IconClose from "src/assets/SvgIcons/IconClose";
import IconMicrophone from "src/assets/SvgIcons/IconMicrophone";
import IconButton from "src/components/shared/Buttons/IconButton";
import SpinLoader from "src/components/shared/SpinLoader";

interface InlineAudioRecorderProps {
onCancel: () => void;
Expand All @@ -21,6 +22,7 @@ const InlineAudioRecorder = (props: InlineAudioRecorderProps) => {
const [send, setSend] = useState<boolean>(false);
const [chunks, setChunks] = useState<Blob[]>([]);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const [isLoading, setLoading] = useState(true);

useEffect(() => {
// timer logic
Expand All @@ -42,6 +44,7 @@ const InlineAudioRecorder = (props: InlineAudioRecorderProps) => {
mediaRecorder.ondataavailable = function (e) {
setChunks((prev) => [...prev, e.data]);
};
setLoading(false);
setIsRunning(true);
};

Expand All @@ -56,6 +59,7 @@ const InlineAudioRecorder = (props: InlineAudioRecorderProps) => {
};

useEffect(() => {
setLoading(true);
// try to support various browsers
navigator.mediaDevices.getUserMedia =
navigator?.mediaDevices?.getUserMedia || // @ts-expect-error
Expand Down Expand Up @@ -96,6 +100,13 @@ const InlineAudioRecorder = (props: InlineAudioRecorderProps) => {
// Seconds calculation
const seconds = Math.floor((time % 6000) / 100);

if (isLoading) {
return (
<div className="gpl-8 gpr-8 d-flex align-center justify-center gpb-25 w-100">
<SpinLoader size={44} />
</div>
);
}
return (
<div className="gpl-8 gpr-8 d-flex align-center gpb-25">
<IconButton
Expand Down

0 comments on commit 9b7ebe6

Please sign in to comment.