Show progress bar in editor toolbar progress dialog & change dialog title (#857)

Author: wwwillchen

mesop/web/src/editor_toolbar/editor_send_prompt_progress_dialog.ng.html

@@ -1,4 +1,5 @@
-<h3 mat-dialog-title>Mesop Editor Progress</h3>
+<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+<h3 mat-dialog-title>Generating code...</h3>
 <mat-dialog-content class="progress-code">
   <mesop-code-mirror-raw [code]="progress$ | async"></mesop-code-mirror-raw>
 </mat-dialog-content>

mesop/web/src/editor_toolbar/editor_toolbar.ts

@@ -34,6 +34,7 @@ import {HighlightPipe} from './highlight_pipe';
 import {EditorService, SelectionMode} from '../services/editor_service';
 import {isMac} from '../utils/platform';
 import {Component as ComponentProto} from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 
 interface PromptOption {
   prompt: string;
@@ -313,6 +314,7 @@ export class EditorToolbar implements OnInit {
     MatButtonModule,
     CommonModule,
     CodeMirrorRawComponent,
+    MatProgressBarModule,
   ],
 })
 class EditorSendPromptProgressDialog {