sandpack icon indicating copy to clipboard operation
sandpack copied to clipboard

Page becomes unresponsive

Open 16bcs1182 opened this issue 1 year ago • 5 comments

Bug Report

Packages Affected

  • [1] sandpack-react
  • [1] sandpack-client

Description of the Problem

I have been using Sandpack React with Monaco Editor for both Angular and React projects. However, during preview, I encounter the following issues:

  1. My webpage crashes.
  2. Sandpack preview crashes with a "Page Unresponsive" error: 2-13-2-sandpack.codesandbox.io
  3. I am unable to type in the editor.

What were you doing when the Problem Occurred?

The issue occurs consistently whenever I start writing code, and upon compilation, Chrome displays the "page unresponsive" error. This issue is observed consistently on Windows systems.

Steps to Reproduce the Problem

  1. Open Sandpack React with Monaco Editor.
  2. Begin writing code.
  3. Compile the code.
  4. Observe the crash and "page unresponsive" error.

Image-

image

Your Environment

Software Name/Version
Sandpack-client version 2.10.0
Sandpack-react version 2.8.0
Browser Chrome 123
Operating System Windows

16bcs1182 avatar Apr 02 '24 05:04 16bcs1182

Hi, unfortunately I couldn't replicate the error, but I really liked the look of your editor and have to ask: How did you get it to look this awesome? It seems to have all the features: add file/folder, delete file/folder, private files, sections for files and directories, and even the theme has colors and icons. Awesome work. Hope you get it up and running soon.

Graquick avatar Apr 05 '24 12:04 Graquick

Hi there! Thank you for your kind words. I'm glad you like the look and features. To achieve this look of the editor, I used Material-UI for the theme. As for the features like adding/deleting files and folders, managing private files, and organizing sections for files and directories, I implemented these functionalities myself. I've been using the Sandpack package to enhance the editor by adding live previews and console outputs.

I've set up a live version for you to try out. You can access it by clicking the link below. No signup is required; simply click the link to start using the assessment in the editor view.

Live Assessment Editor

Please feel free to test it out and share any feedback you have. I'd particularly appreciate hearing about any responsiveness issues or concerns related to memory usage.

Looking forward to your thoughts!

tyagirajat200 avatar Apr 09 '24 05:04 tyagirajat200

Hi @Graquick Have you checked the editor ?

tyagirajat200 avatar Apr 12 '24 02:04 tyagirajat200

Hey @tyagirajat200 !

I have been testing out your editor, and it is truly great work. Each functionality worked smoothly, and there wasn't any responsiveness issues. When resizing I think, it displayed a message correctly, so no issues on my part.

One thing to improve though, is code formatting in the editor. Adding a feature like prettier would really be a game changer. But yeah that's all.

Thanks for letting me test it out!

Graquick avatar Apr 13 '24 07:04 Graquick