A focused Docker Compose management web application.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: make loader replace icon

Brooke 2c8b8712 f02197b0

+41 -29
+5 -1
packages/panel/src/lib/component/LoaderButton.svelte
··· 27 27 <span class="loader"></span> 28 28 {/if} 29 29 30 - <div> 30 + <div class="content"> 31 31 {#if typeof children === "string"} 32 32 {children} 33 33 {:else} ··· 62 62 100% { 63 63 transform: rotate(360deg); 64 64 } 65 + } 66 + 67 + .content:empty { 68 + display: none; 65 69 } 66 70 </style>
+36 -28
packages/panel/src/routes/(authenticated)/projects/[project]/ProjectStatus.svelte
··· 26 26 onclick={() => 27 27 api.client.POST("/api/project/{project}/start", { params: { path: { project: project.name } } })} 28 28 > 29 - <div class="flexr center gap-10"> 30 - <Fa icon={faPlay} /> 31 - Start All 32 - </div> 29 + {#snippet children(loading)} 30 + <div class="flexr center gap-10"> 31 + {#if !loading}<Fa icon={faPlay} />{/if} 32 + Start All 33 + </div> 34 + {/snippet} 33 35 </PromiseButton> 34 36 </div> 35 37 <div> ··· 40 42 onclick={() => 41 43 api.client.POST("/api/project/{project}/restart", { params: { path: { project: project.name } } })} 42 44 > 43 - <div class="flexr center gap-10"> 44 - <Fa icon={faArrowsRotate} /> 45 - Restart All 46 - </div> 45 + {#snippet children(loading)} 46 + <div class="flexr center gap-10"> 47 + {#if !loading}<Fa icon={faArrowsRotate} />{/if} 48 + Restart All 49 + </div> 50 + {/snippet} 47 51 </PromiseButton> 48 52 </div> 49 53 <div> ··· 54 58 onclick={() => 55 59 api.client.POST("/api/project/{project}/stop", { params: { path: { project: project.name } } })} 56 60 > 57 - <div class="flexr center gap-10"> 58 - <Fa icon={faStop} /> 59 - Stop All 60 - </div> 61 + {#snippet children(loading)} 62 + <div class="flexr center gap-10"> 63 + {#if !loading}<Fa icon={faStop} />{/if} 64 + Stop All 65 + </div> 66 + {/snippet} 61 67 </PromiseButton> 62 68 </div> 63 69 <div> ··· 67 73 onclick={() => 68 74 api.client.POST("/api/project/{project}/redeploy", { params: { path: { project: project.name } } })} 69 75 > 70 - <div class="flexr center gap-10"> 71 - <Fa icon={faRocket} /> 72 - Redeploy All 73 - </div> 76 + {#snippet children(loading)} 77 + <div class="flexr center gap-10"> 78 + {#if !loading}<Fa icon={faRocket} />{/if} 79 + Redeploy All 80 + </div> 81 + {/snippet} 74 82 </PromiseButton> 75 83 </div> 76 84 </div> ··· 98 106 params: { path: { project: project.name, service: service.serviceName } }, 99 107 })} 100 108 > 101 - <div class="flexr center gap-10"> 102 - <Fa icon={faPlay} /> 103 - </div> 109 + {#snippet children(loading)} 110 + {#if !loading}<Fa icon={faPlay} />{/if} 111 + {/snippet} 104 112 </PromiseButton> 105 113 <PromiseButton 106 114 style="a" ··· 111 119 params: { path: { project: project.name, service: service.serviceName } }, 112 120 })} 113 121 > 114 - <div class="flexr center gap-10"> 115 - <Fa icon={faArrowsRotate} /> 116 - </div> 122 + {#snippet children(loading)} 123 + {#if !loading}<Fa icon={faArrowsRotate} />{/if} 124 + {/snippet} 117 125 </PromiseButton> 118 126 119 127 <PromiseButton ··· 125 133 params: { path: { project: project.name, service: service.serviceName } }, 126 134 })} 127 135 > 128 - <div class="flexr center gap-10"> 129 - <Fa icon={faStop} /> 130 - </div> 136 + {#snippet children(loading)} 137 + {#if !loading}<Fa icon={faStop} />{/if} 138 + {/snippet} 131 139 </PromiseButton> 132 140 133 141 <PromiseButton ··· 138 146 params: { path: { project: project.name, service: service.serviceName } }, 139 147 })} 140 148 > 141 - <div class="flexr center gap-10"> 142 - <Fa icon={faRocket} /> 143 - </div> 149 + {#snippet children(loading)} 150 + {#if !loading}<Fa icon={faRocket} />{/if} 151 + {/snippet} 144 152 </PromiseButton> 145 153 </div> 146 154 </div>