mishig HF staff commited on
Commit
e1fc821
1 Parent(s): 9a62aea

Better canvas loading ui

Browse files
Files changed (1) hide show
  1. src/routes/+page.svelte +42 -34
src/routes/+page.svelte CHANGED
@@ -370,44 +370,52 @@
370
  bind:this={sketchEl}
371
  />
372
  <div class="flex flex-col items-center {isLoading ? 'pointer-events-none' : ''}">
 
 
 
 
 
 
373
  <div id="board-container" bind:this={canvasContainerEl} />
374
- <div>
375
- <div class="flex gap-x-2 mt-3 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
376
- <input
377
- type="text"
378
- class="border-2 py-1"
379
- placeholder="Add prompt"
380
- maxlength="200"
381
- on:keydown={onKeyDown}
382
- bind:value={txt}
383
- />
384
- <button
385
- on:click={submitRequest}
386
- class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-4"
387
- >
388
- diffuse the f rest
389
- </button>
390
- </div>
391
- <div class="mt-4">
392
- <label class="inline border py-1 px-1.5 bg-slate-200 cursor-pointer">
393
- <input
394
- accept="image/*"
395
- bind:this={fileInput}
396
- on:change={onfImgUpload}
397
- style="display: none;"
398
- type="file"
399
- />
400
- upload img
401
- </label>
402
- <p class="hidden desktop:inline mt-2 opacity-50">
403
- pro tip: upload img by dropping on the canvas
404
- </p>
405
- </div>
406
- </div>
 
 
407
  </div>
408
  </div>
409
 
410
- <article class="prose-sm px-4 md:px-12 lg:px-56 mb-8">
411
 
412
  <div class="text-center">
413
 
 
370
  bind:this={sketchEl}
371
  />
372
  <div class="flex flex-col items-center {isLoading ? 'pointer-events-none' : ''}">
373
+ {#if !canvas}
374
+ <div>
375
+ <p>Loading…</p>
376
+ <p>█▒▒▒▒▒▒▒▒▒</p>
377
+ </div>
378
+ {/if}
379
  <div id="board-container" bind:this={canvasContainerEl} />
380
+ {#if canvas}
381
+ <div>
382
+ <div class="flex gap-x-2 mt-3 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
383
+ <input
384
+ type="text"
385
+ class="border-2 py-1"
386
+ placeholder="Add prompt"
387
+ maxlength="200"
388
+ on:keydown={onKeyDown}
389
+ bind:value={txt}
390
+ />
391
+ <button
392
+ on:click={submitRequest}
393
+ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-4"
394
+ >
395
+ diffuse the f rest
396
+ </button>
397
+ </div>
398
+ <div class="mt-4">
399
+ <label class="inline border py-1 px-1.5 bg-slate-200 cursor-pointer">
400
+ <input
401
+ accept="image/*"
402
+ bind:this={fileInput}
403
+ on:change={onfImgUpload}
404
+ style="display: none;"
405
+ type="file"
406
+ />
407
+ upload img
408
+ </label>
409
+ <p class="hidden desktop:inline mt-2 opacity-50">
410
+ pro tip: upload img by dropping on the canvas
411
+ </p>
412
+ </div>
413
+ </div>
414
+ {/if}
415
  </div>
416
  </div>
417
 
418
+ <article class="prose-sm px-4 md:px-12 lg:px-56 mb-8 {!canvas ? 'hidden' : ''}">
419
 
420
  <div class="text-center">
421