create flashcard stack and ui fixes

1 files changed, 11 insertions, 2 deletions

diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index cedd3c7c3..c1198b4f7 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -15,6 +15,7 @@ import { LinkPopup } from '../linking/LinkPopup';
 import { DocumentView } from '../nodes/DocumentView';
 import './AnchorMenu.scss';
 import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
+import ReactLoading from 'react-loading';
 
 @observer
 export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -24,6 +25,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     private _disposer: IReactionDisposer | undefined;
     private _commentRef = React.createRef<HTMLDivElement>();
     private _cropRef = React.createRef<HTMLDivElement>();
+    @observable private _loading = false;
     // @observable protected _top: number = -300;
     // @observable protected _left: number = -300;
 
@@ -110,15 +112,16 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      */
     gptFlashcards = async (e: React.PointerEvent) => {
         const queryText = this._selectedText;
+        this._loading = true;
         try {
             const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
             console.log(res);
-            GPTPopup.Instance.setText(res || 'Something went wrong.');
+            // GPTPopup.Instance.setText(res || 'Something went wrong.');
             this.transferToFlashcard(res || 'Something went wrong');
         } catch (err) {
             console.error(err);
         }
-        GPTPopup.Instance.setLoading(false);
+        // GPTPopup.Instance.setLoading(false);
     };
 
     /*
@@ -147,6 +150,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         newCol.zIndex = 100;
 
         this.addToCollection?.(newCol);
+        this._loading = false;
     };
 
     pointerDown = (e: React.PointerEvent) => {
@@ -263,6 +267,11 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             />
                         </div>
                     )}
+                    {this._loading ? (
+                        <div className="loading-spinner" style={{ position: 'absolute' }}>
+                            <ReactLoading type="spin" height={30} width={30} color={'white'} />
+                        </div>
+                    ) : null}
                 </>
             ) : (
                 <>